@scrippsproduct/networks-ui-library 1.1.8 → 1.1.10-alpha.0

package/dist/components/NavList/NavList.test.js

@@ -0,0 +1,332 @@
+import { jsx as a } from "react/jsx-runtime";
+import { v as u, d as c, b as v, i as l, r as s, g as t, s as i } from "../../react.esm-DLSrfVwM.mjs";
+import { u as g } from "../../index-BUN4jQ3m.mjs";
+import { NavList as o } from "./NavList.js";
+u.mock("../AnchorTag", () => ({
+  default: ({
+    classname: r,
+    clickHandler: e,
+    href: n,
+    image: h,
+    label: d,
+    type: m
+  }) => /* @__PURE__ */ a(
+    "a",
+    {
+      className: r,
+      "data-href": n,
+      "data-image": h ? JSON.stringify({ src: h.url, alt: h.altText }) : void 0,
+      "data-label": d,
+      "data-testid": "anchor-tag",
+      "data-type": m,
+      onClick: e || void 0,
+      children: d
+    }
+  )
+}));
+u.mock("../../utils/helpers", () => ({
+  slugify: (r) => r.toLowerCase().replace(/\s+/g, "-")
+}));
+u.mock("./NavList.module.scss", () => ({
+  default: {
+    "nav-list": "nav-list",
+    "nav-list__item": "nav-list__item"
+  }
+}));
+c("NavList", () => {
+  const r = [
+    { href: "/link1", label: "Link 1", type: "internal-link" },
+    { href: "/link2", label: "Link 2", type: "internal-link" },
+    { href: "/link3", label: "Link 3", type: "external-link" }
+  ];
+  v(() => {
+    u.clearAllMocks();
+  }), c("Basic Rendering", () => {
+    l("should render without crashing", () => {
+      s(/* @__PURE__ */ a(o, {})), t(document.body).toBeTruthy();
+    }), l("should render as div wrapper by default", () => {
+      const { container: e } = s(/* @__PURE__ */ a(o, {})), n = e.querySelector("div");
+      t(n).toBeInTheDocument();
+    }), l("should render as nav wrapper when useNavWrapper is true", () => {
+      s(/* @__PURE__ */ a(o, { useNavWrapper: !0 }));
+      const e = i.getByRole("navigation");
+      t(e).toBeInTheDocument();
+    }), l("should render ul element", () => {
+      s(/* @__PURE__ */ a(o, { links: r }));
+      const e = document.querySelector("ul");
+      t(e).toBeInTheDocument();
+    }), l("should apply nav-list class to ul", () => {
+      s(/* @__PURE__ */ a(o, { links: r }));
+      const e = document.querySelector("ul");
+      t(e).toHaveClass("nav-list");
+    });
+  }), c("Title Rendering", () => {
+    l("should render title when provided", () => {
+      s(/* @__PURE__ */ a(o, { title: "Navigation Menu" })), t(i.getByText("Navigation Menu")).toBeInTheDocument();
+    }), l("should not render title when empty string", () => {
+      const { container: e } = s(/* @__PURE__ */ a(o, { title: "" })), n = e.querySelector("h2");
+      t(n).not.toBeInTheDocument();
+    }), l("should not render title when undefined", () => {
+      const { container: e } = s(/* @__PURE__ */ a(o, {})), n = e.querySelector("h2");
+      t(n).not.toBeInTheDocument();
+    }), l("should apply h4 class to title", () => {
+      s(/* @__PURE__ */ a(o, { title: "Navigation Menu" }));
+      const e = i.getByText("Navigation Menu");
+      t(e).toHaveClass("h4");
+    }), l("should create slugified id for title", () => {
+      s(/* @__PURE__ */ a(o, { title: "Navigation Menu" }));
+      const e = i.getByText("Navigation Menu");
+      t(e).toHaveAttribute("id", "navigation-menu");
+    }), l("should not have id when title is empty", () => {
+      const { container: e } = s(/* @__PURE__ */ a(o, { links: r, title: "" })), n = e.querySelector("h2");
+      t(n).not.toBeInTheDocument();
+    });
+  }), c("Nav Wrapper Mode", () => {
+    l("should set aria-labelledby when title is provided", () => {
+      s(/* @__PURE__ */ a(o, { useNavWrapper: !0, title: "Main Navigation" }));
+      const e = i.getByRole("navigation");
+      t(e).toHaveAttribute("aria-labelledby", "main-navigation");
+    }), l("should not set aria-labelledby when title is empty", () => {
+      s(/* @__PURE__ */ a(o, { useNavWrapper: !0, title: "" }));
+      const e = i.getByRole("navigation");
+      t(e).toHaveAttribute("aria-labelledby", "");
+    }), l("should apply classname to nav wrapper", () => {
+      s(/* @__PURE__ */ a(o, { useNavWrapper: !0, classname: "custom-nav" }));
+      const e = i.getByRole("navigation");
+      t(e).toHaveClass("custom-nav");
+    });
+  }), c("Div Wrapper Mode", () => {
+    l("should apply classname to div wrapper", () => {
+      const { container: e } = s(/* @__PURE__ */ a(o, { classname: "custom-nav" })), n = e.querySelector("div.custom-nav");
+      t(n).toBeInTheDocument();
+    }), l("should not have aria-labelledby in div mode", () => {
+      const { container: e } = s(/* @__PURE__ */ a(o, { title: "Menu" })), n = e.querySelector("div");
+      t(n).not.toHaveAttribute("aria-labelledby");
+    });
+  }), c("Links Rendering", () => {
+    l("should render all provided links", () => {
+      s(/* @__PURE__ */ a(o, { links: r }));
+      const e = i.getAllByTestId("anchor-tag");
+      t(e).toHaveLength(3);
+    }), l("should render empty list when no links provided", () => {
+      s(/* @__PURE__ */ a(o, {}));
+      const e = document.querySelector("ul");
+      t(e == null ? void 0 : e.children).toHaveLength(0);
+    }), l("should render empty list when links is empty array", () => {
+      s(/* @__PURE__ */ a(o, { links: [] }));
+      const e = document.querySelector("ul");
+      t(e == null ? void 0 : e.children).toHaveLength(0);
+    }), l("should render li elements for each link", () => {
+      s(/* @__PURE__ */ a(o, { links: r }));
+      const e = document.querySelectorAll("li");
+      t(e).toHaveLength(3);
+    }), l("should apply nav-list__item class to each li", () => {
+      s(/* @__PURE__ */ a(o, { links: r })), document.querySelectorAll("li").forEach((n) => {
+        t(n).toHaveClass("nav-list__item");
+      });
+    }), l("should pass correct href to AnchorTag", () => {
+      s(/* @__PURE__ */ a(o, { links: r }));
+      const e = i.getAllByTestId("anchor-tag");
+      t(e[0]).toHaveAttribute("data-href", "/link1"), t(e[1]).toHaveAttribute("data-href", "/link2"), t(e[2]).toHaveAttribute("data-href", "/link3");
+    }), l("should pass correct label to AnchorTag", () => {
+      s(/* @__PURE__ */ a(o, { links: r }));
+      const e = i.getAllByTestId("anchor-tag");
+      t(e[0]).toHaveAttribute("data-label", "Link 1"), t(e[1]).toHaveAttribute("data-label", "Link 2"), t(e[2]).toHaveAttribute("data-label", "Link 3");
+    }), l("should pass correct type to AnchorTag", () => {
+      s(/* @__PURE__ */ a(o, { links: r }));
+      const e = i.getAllByTestId("anchor-tag");
+      t(e[0]).toHaveAttribute("data-type", "internal-link"), t(e[1]).toHaveAttribute("data-type", "internal-link"), t(e[2]).toHaveAttribute("data-type", "external-link");
+    });
+  }), c("Link Images", () => {
+    l("should pass image to AnchorTag when provided", () => {
+      s(/* @__PURE__ */ a(o, { links: [
+        {
+          href: "/link1",
+          label: "Link 1",
+          type: "internal-link",
+          image: { url: "/image.jpg", altText: "Image", aspectRatio: 1 }
+        }
+      ] }));
+      const n = i.getByTestId("anchor-tag");
+      t(n).toHaveAttribute("data-image");
+      const h = n.getAttribute("data-image");
+      if (t(h).toBeTruthy(), h) {
+        const d = JSON.parse(h);
+        t(d.src).toBe("/image.jpg"), t(d.alt).toBe("Image");
+      }
+    }), l("should pass null for image when not provided", () => {
+      s(/* @__PURE__ */ a(o, { links: r })), i.getAllByTestId("anchor-tag").forEach((n) => {
+        t(n).not.toHaveAttribute("data-image");
+      });
+    });
+  }), c("Link Classnames", () => {
+    l("should include custom classname in AnchorTag when link has classname", () => {
+      s(/* @__PURE__ */ a(o, { classname: "nav", links: [
+        {
+          href: "/link1",
+          label: "Link 1",
+          type: "internal-link",
+          classname: "custom-link"
+        }
+      ] }));
+      const n = i.getByTestId("anchor-tag");
+      t(n.className).toContain("custom-link");
+    }), l("should apply base classname pattern to AnchorTag", () => {
+      s(/* @__PURE__ */ a(o, { classname: "nav", links: r })), i.getAllByTestId("anchor-tag").forEach((n) => {
+        t(n.className).toContain("nav__nav-link");
+      });
+    }), l("should combine classname with li elements", () => {
+      s(/* @__PURE__ */ a(o, { classname: "custom", links: r })), document.querySelectorAll("li").forEach((n) => {
+        t(n.className).toContain("custom__nav-item");
+      });
+    }), l("should combine classname with ul element", () => {
+      s(/* @__PURE__ */ a(o, { classname: "custom", links: r }));
+      const e = document.querySelector("ul");
+      t(e == null ? void 0 : e.className).toContain("custom__nav-list");
+    });
+  }), c("Toggle Handler", () => {
+    l("should pass toggleHandler to AnchorTag components", async () => {
+      const e = g.setup(), n = u.fn();
+      s(/* @__PURE__ */ a(o, { links: r, toggleHandler: n }));
+      const h = i.getAllByTestId("anchor-tag");
+      await e.click(h[0]), t(n).toHaveBeenCalledTimes(1);
+    }), l("should not pass handler when toggleHandler is null", () => {
+      s(/* @__PURE__ */ a(o, { links: r, toggleHandler: null })), i.getAllByTestId("anchor-tag").forEach((n) => {
+        t(n).not.toHaveAttribute("onclick");
+      });
+    }), l("should call toggleHandler for each link click", async () => {
+      const e = g.setup(), n = u.fn();
+      s(/* @__PURE__ */ a(o, { links: r, toggleHandler: n }));
+      const h = i.getAllByTestId("anchor-tag");
+      await e.click(h[0]), await e.click(h[1]), await e.click(h[2]), t(n).toHaveBeenCalledTimes(3);
+    }), l("should pass undefined when toggleHandler is not provided", () => {
+      s(/* @__PURE__ */ a(o, { links: r })), i.getAllByTestId("anchor-tag").forEach((n) => {
+        t(n).not.toHaveAttribute("onclick");
+      });
+    });
+  }), c("Default Props", () => {
+    l("should use empty string for title by default", () => {
+      const { container: e } = s(/* @__PURE__ */ a(o, {})), n = e.querySelector("h2");
+      t(n).not.toBeInTheDocument();
+    }), l("should use empty array for links by default", () => {
+      s(/* @__PURE__ */ a(o, {}));
+      const e = document.querySelector("ul");
+      t(e == null ? void 0 : e.children).toHaveLength(0);
+    }), l("should use empty string for classname by default", () => {
+      const { container: e } = s(/* @__PURE__ */ a(o, {})), n = e.firstChild;
+      t(n.className).toBe("");
+    }), l("should use false for useNavWrapper by default", () => {
+      const { container: e } = s(/* @__PURE__ */ a(o, {})), n = e.querySelector("nav");
+      t(n).not.toBeInTheDocument();
+    }), l("should use null for toggleHandler by default", () => {
+      s(/* @__PURE__ */ a(o, { links: r })), i.getAllByTestId("anchor-tag").forEach((n) => {
+        t(n).not.toHaveAttribute("onclick");
+      });
+    });
+  }), c("List Item Keys", () => {
+    l("should generate unique keys for list items", () => {
+      s(/* @__PURE__ */ a(o, { classname: "nav", links: r }));
+      const e = document.querySelectorAll("li");
+      t(e).toHaveLength(r.length);
+    });
+  }), c("Edge Cases", () => {
+    l("should handle single link", () => {
+      s(/* @__PURE__ */ a(o, { links: [
+        { href: "/single", label: "Single Link", type: "internal-link" }
+      ] }));
+      const n = i.getAllByTestId("anchor-tag");
+      t(n).toHaveLength(1);
+    }), l("should handle very long title", () => {
+      const e = "This is a very long navigation menu title that should still render correctly";
+      s(/* @__PURE__ */ a(o, { title: e })), t(i.getByText(e)).toBeInTheDocument();
+    }), l("should handle special characters in title", () => {
+      const e = "Navigation & Menu (2024)";
+      s(/* @__PURE__ */ a(o, { title: e })), t(i.getByText(e)).toBeInTheDocument();
+    }), l("should handle links with minimal properties", () => {
+      s(/* @__PURE__ */ a(o, { links: [
+        { href: "/link", label: "Link", type: "internal-link" }
+      ] }));
+      const n = i.getByTestId("anchor-tag");
+      t(n).toBeInTheDocument();
+    }), l("should handle multiple classnames on links", () => {
+      s(/* @__PURE__ */ a(o, { classname: "nav", links: [
+        {
+          href: "/link1",
+          label: "Link 1",
+          type: "internal-link",
+          classname: "class1 class2 class3"
+        }
+      ] }));
+      const n = i.getByTestId("anchor-tag");
+      t(n.className).toContain("class1 class2 class3");
+    }), l("should handle empty classname prop", () => {
+      s(/* @__PURE__ */ a(o, { classname: "", links: r }));
+      const e = document.querySelector("ul");
+      t(e == null ? void 0 : e.className).toContain("__nav-list");
+    });
+  }), c("Integration", () => {
+    l("should render complete navigation with title and links", () => {
+      s(
+        /* @__PURE__ */ a(
+          o,
+          {
+            useNavWrapper: !0,
+            classname: "main-nav",
+            links: r,
+            title: "Main Menu"
+          }
+        )
+      ), t(i.getByText("Main Menu")).toBeInTheDocument(), t(i.getByRole("navigation")).toBeInTheDocument(), t(i.getAllByTestId("anchor-tag")).toHaveLength(3);
+    }), l("should render with all optional props", () => {
+      const e = u.fn();
+      s(
+        /* @__PURE__ */ a(
+          o,
+          {
+            useNavWrapper: !0,
+            classname: "full-nav",
+            links: [
+              {
+                href: "/link1",
+                label: "Link 1",
+                type: "internal-link",
+                image: { url: "/img1.jpg", altText: "Image 1", aspectRatio: 1 },
+                classname: "special-link"
+              }
+            ],
+            title: "Complete Navigation",
+            toggleHandler: e
+          }
+        )
+      ), t(i.getByText("Complete Navigation")).toBeInTheDocument(), t(i.getByRole("navigation")).toHaveClass("full-nav"), t(i.getByTestId("anchor-tag")).toBeInTheDocument();
+    }), l("should maintain structure with empty links", () => {
+      s(
+        /* @__PURE__ */ a(
+          o,
+          {
+            useNavWrapper: !0,
+            classname: "empty-nav",
+            links: [],
+            title: "Empty Menu"
+          }
+        )
+      ), t(i.getByText("Empty Menu")).toBeInTheDocument(), t(i.getByRole("navigation")).toBeInTheDocument();
+      const e = document.querySelector("ul");
+      t(e).toBeInTheDocument(), t(e == null ? void 0 : e.children).toHaveLength(0);
+    });
+  }), c("Accessibility", () => {
+    l("should have proper heading hierarchy", () => {
+      s(/* @__PURE__ */ a(o, { title: "Navigation" }));
+      const e = i.getByRole("heading", { level: 2 });
+      t(e).toBeInTheDocument();
+    }), l("should connect nav to heading with aria-labelledby", () => {
+      s(/* @__PURE__ */ a(o, { useNavWrapper: !0, title: "Main Menu" }));
+      const e = i.getByRole("navigation"), n = i.getByText("Main Menu");
+      t(e).toHaveAttribute("aria-labelledby", n.id);
+    }), l("should have accessible list structure", () => {
+      s(/* @__PURE__ */ a(o, { useNavWrapper: !0, links: r }));
+      const n = i.getByRole("navigation").querySelector("ul");
+      t(n).toBeInTheDocument();
+    });
+  });
+});

package/dist/components/Overlay/Overlay.js

@@ -1,6 +1,6 @@
-import { jsx as n, Fragment as l } from "react/jsx-runtime";
-import { useEffect as s } from "react";
-import { r as i } from "../../index-C-kn9Zhn.mjs";
+import { jsx as l, Fragment as s } from "react/jsx-runtime";
+import { useEffect as a } from "react";
+import { r as i } from "../../index-DzfYkULW.mjs";
 import '../../assets/Overlay.css';const v = "_overlay_itsaf_1", d = {
   overlay: v
 };
@@ -8,29 +8,30 @@ function p({
   appendToElement: r,
   state: o = "entering"
 }) {
-  (() => {
+  return (() => {
     if (!document.querySelector("#overlay")) {
-      const t = document.createElement("div");
-      t.setAttribute("id", "overlay"), t.setAttribute("class", `${d.overlay} overlay`), t.setAttribute("data-state", "entering"), r ? r.append(t) : document.body.appendChild(t);
+      const e = document.createElement("div");
+      e.setAttribute("id", "overlay"), e.setAttribute("class", `${d.overlay} overlay`), e.setAttribute("data-state", "entering"), r ? r.append(e) : document.body.appendChild(e);
     }
-  })();
-  const a = setInterval(() => {
-    const e = document.querySelector("#overlay");
-    if (e) {
-      const t = () => {
-        const c = new CustomEvent("scripps:overlay:closed");
-        document.dispatchEvent(c), e.setAttribute("data-state", "exiting"), setTimeout(() => {
-          e.remove();
-        }, 200);
-      };
-      clearInterval(a), e.addEventListener("click", t);
-    }
-  }, 100);
-  return s(() => {
-    var e;
-    (e = document.querySelector("#overlay")) == null || e.setAttribute("data-state", o);
+  })(), a(() => {
+    const t = setInterval(() => {
+      const e = document.querySelector("#overlay");
+      if (e) {
+        const c = () => {
+          const n = new CustomEvent("scripps:overlay:closed");
+          document.dispatchEvent(n), e.setAttribute("data-state", "exiting"), setTimeout(() => {
+            e.remove();
+          }, 200);
+        };
+        clearInterval(t), e.addEventListener("click", c);
+      }
+    }, 100);
+    return () => clearInterval(t);
+  }, []), a(() => {
+    var t;
+    (t = document.querySelector("#overlay")) == null || t.setAttribute("data-state", o);
   }, [o]), i.createPortal(
-    /* @__PURE__ */ n(l, {}),
+    /* @__PURE__ */ l(s, {}),
     document.getElementById("overlay")
   );
 }

package/dist/components/Overlay/Overlay.test.js

@@ -0,0 +1,198 @@
+import { jsx as n } from "react/jsx-runtime";
+import { v as a, d, b as u, a as y, i as s, r as l, g as t, w as m } from "../../react.esm-DLSrfVwM.mjs";
+import { Overlay as o } from "./Overlay.js";
+a.mock("./Overlay.module.scss", () => ({
+  default: {
+    overlay: "overlay-module"
+  }
+}));
+d("Overlay", () => {
+  u(() => {
+    document.body.innerHTML = "", a.clearAllMocks();
+  }), y(() => {
+    a.clearAllTimers(), document.body.innerHTML = "";
+  }), d("Portal Element Creation", () => {
+    s("should create overlay element in body by default", () => {
+      l(/* @__PURE__ */ n(o, {}));
+      const e = document.querySelector("#overlay");
+      t(e).toBeInTheDocument(), t(document.body.contains(e)).toBe(!0);
+    }), s("should create overlay element with correct id", () => {
+      l(/* @__PURE__ */ n(o, {}));
+      const e = document.getElementById("overlay");
+      t(e).toBeInTheDocument();
+    }), s("should apply overlay class to element", () => {
+      l(/* @__PURE__ */ n(o, {}));
+      const e = document.getElementById("overlay");
+      t(e).toHaveClass("overlay");
+    }), s("should apply SCSS module class to element", () => {
+      l(/* @__PURE__ */ n(o, {}));
+      const e = document.getElementById("overlay");
+      t(e).toHaveClass("overlay-module");
+    }), s("should set initial data-state to entering", () => {
+      l(/* @__PURE__ */ n(o, {}));
+      const e = document.getElementById("overlay");
+      t(e).toHaveAttribute("data-state", "entering");
+    }), s("should not create duplicate overlay if one exists", () => {
+      l(/* @__PURE__ */ n(o, {})), l(/* @__PURE__ */ n(o, {}));
+      const e = document.querySelectorAll("#overlay");
+      t(e).toHaveLength(1);
+    });
+  }), d("Append to Custom Element", () => {
+    s("should append to custom element when provided", () => {
+      const e = document.createElement("div");
+      e.id = "custom-container", document.body.appendChild(e), l(/* @__PURE__ */ n(o, { appendToElement: e }));
+      const r = document.getElementById("overlay");
+      t(r).toBeInTheDocument(), t(e.contains(r)).toBe(!0);
+    }), s("should not append to body when custom element provided", () => {
+      const e = document.createElement("div");
+      e.id = "custom-container", document.body.appendChild(e), l(/* @__PURE__ */ n(o, { appendToElement: e }));
+      const r = document.getElementById("overlay");
+      t(r == null ? void 0 : r.parentElement).toBe(e), t(document.body.children).toContain(e);
+    });
+  }), d("State Management", () => {
+    s("should set data-state to entering by default", () => {
+      l(/* @__PURE__ */ n(o, {}));
+      const e = document.getElementById("overlay");
+      t(e).toHaveAttribute("data-state", "entering");
+    }), s("should update data-state when state prop changes to entered", async () => {
+      const { rerender: e } = l(/* @__PURE__ */ n(o, { state: "entering" }));
+      e(/* @__PURE__ */ n(o, { state: "entered" })), await m(() => {
+        const r = document.getElementById("overlay");
+        t(r).toHaveAttribute("data-state", "entered");
+      });
+    }), s("should update data-state when state prop changes to exiting", async () => {
+      const { rerender: e } = l(/* @__PURE__ */ n(o, { state: "entering" }));
+      e(/* @__PURE__ */ n(o, { state: "exiting" })), await m(() => {
+        const r = document.getElementById("overlay");
+        t(r).toHaveAttribute("data-state", "exiting");
+      });
+    }), s("should update data-state when state prop changes to exited", async () => {
+      const { rerender: e } = l(/* @__PURE__ */ n(o, { state: "entering" }));
+      e(/* @__PURE__ */ n(o, { state: "exited" })), await m(() => {
+        const r = document.getElementById("overlay");
+        t(r).toHaveAttribute("data-state", "exited");
+      });
+    }), s("should handle multiple state transitions", async () => {
+      const { rerender: e } = l(/* @__PURE__ */ n(o, { state: "entering" }));
+      e(/* @__PURE__ */ n(o, { state: "entered" })), await m(() => {
+        t(document.getElementById("overlay")).toHaveAttribute("data-state", "entered");
+      }), e(/* @__PURE__ */ n(o, { state: "exiting" })), await m(() => {
+        t(document.getElementById("overlay")).toHaveAttribute("data-state", "exiting");
+      }), e(/* @__PURE__ */ n(o, { state: "exited" })), await m(() => {
+        t(document.getElementById("overlay")).toHaveAttribute("data-state", "exited");
+      });
+    });
+  }), d("Click Handler", () => {
+    s("should attach click event listener to overlay", async () => {
+      a.useFakeTimers(), l(/* @__PURE__ */ n(o, {})), a.advanceTimersByTime(100);
+      const e = document.getElementById("overlay");
+      t(e).toBeInTheDocument(), a.useRealTimers();
+    }), s("should dispatch custom event on click", async () => {
+      a.useFakeTimers();
+      const e = a.fn();
+      document.addEventListener("scripps:overlay:closed", e), l(/* @__PURE__ */ n(o, {})), a.advanceTimersByTime(100);
+      const r = document.getElementById("overlay");
+      t(r).toBeInTheDocument(), r && r.click(), t(e).toHaveBeenCalledTimes(1), document.removeEventListener("scripps:overlay:closed", e), a.useRealTimers();
+    }), s("should set data-state to exiting on click", async () => {
+      a.useFakeTimers(), l(/* @__PURE__ */ n(o, {})), a.advanceTimersByTime(100);
+      const e = document.getElementById("overlay");
+      t(e).toBeInTheDocument(), e && e.click(), t(e).toHaveAttribute("data-state", "exiting"), a.useRealTimers();
+    }), s("should remove overlay element after 200ms delay", async () => {
+      a.useFakeTimers(), l(/* @__PURE__ */ n(o, {})), a.advanceTimersByTime(100);
+      const e = document.getElementById("overlay");
+      t(e).toBeInTheDocument(), e && e.click(), t(document.getElementById("overlay")).toBeInTheDocument(), a.advanceTimersByTime(200), t(document.getElementById("overlay")).not.toBeInTheDocument(), a.useRealTimers();
+    });
+  }), d("Interval Management", () => {
+    s("should clear interval after overlay element is found", async () => {
+      a.useFakeTimers();
+      const e = a.spyOn(global, "clearInterval");
+      l(/* @__PURE__ */ n(o, {})), a.advanceTimersByTime(100), t(e).toHaveBeenCalled(), e.mockRestore(), a.useRealTimers();
+    }), s("should continue checking if overlay not immediately available", async () => {
+      a.useFakeTimers(), l(/* @__PURE__ */ n(o, {})), a.advanceTimersByTime(100), t(document.getElementById("overlay")).toBeInTheDocument(), a.useRealTimers();
+    });
+  }), d("Custom Event", () => {
+    s("should dispatch CustomEvent with correct type", async () => {
+      a.useFakeTimers();
+      const e = a.fn((c) => {
+        t(c.type).toBe("scripps:overlay:closed"), t(c instanceof CustomEvent).toBe(!0);
+      });
+      document.addEventListener("scripps:overlay:closed", e), l(/* @__PURE__ */ n(o, {})), a.advanceTimersByTime(100);
+      const r = document.getElementById("overlay");
+      r && r.click(), t(e).toHaveBeenCalled(), document.removeEventListener("scripps:overlay:closed", e), a.useRealTimers();
+    }), s("should be catchable by document event listener", async () => {
+      a.useFakeTimers();
+      let e = !1;
+      const r = () => {
+        e = !0;
+      };
+      document.addEventListener("scripps:overlay:closed", r), l(/* @__PURE__ */ n(o, {})), a.advanceTimersByTime(100);
+      const c = document.getElementById("overlay");
+      c && c.click(), t(e).toBe(!0), document.removeEventListener("scripps:overlay:closed", r), a.useRealTimers();
+    });
+  }), d("Portal Rendering", () => {
+    s("should render empty portal", () => {
+      const { container: e } = l(/* @__PURE__ */ n(o, {}));
+      t(e.innerHTML).toBe("");
+    }), s("should render portal to overlay element", () => {
+      l(/* @__PURE__ */ n(o, {}));
+      const e = document.getElementById("overlay");
+      t(e).toBeInTheDocument(), t(e == null ? void 0 : e.tagName).toBe("DIV");
+    }), s("should portal content be empty", () => {
+      l(/* @__PURE__ */ n(o, {}));
+      const e = document.getElementById("overlay");
+      t(e == null ? void 0 : e.innerHTML).toBe("");
+    });
+  }), d("Edge Cases", () => {
+    s("should handle undefined appendToElement gracefully", () => {
+      l(/* @__PURE__ */ n(o, { appendToElement: void 0 }));
+      const e = document.getElementById("overlay");
+      t(e).toBeInTheDocument(), t(document.body.contains(e)).toBe(!0);
+    }), s("should handle rapid state changes", async () => {
+      const { rerender: e } = l(/* @__PURE__ */ n(o, { state: "entering" }));
+      e(/* @__PURE__ */ n(o, { state: "entered" })), e(/* @__PURE__ */ n(o, { state: "exiting" })), e(/* @__PURE__ */ n(o, { state: "exited" })), e(/* @__PURE__ */ n(o, { state: "entering" })), await m(() => {
+        const r = document.getElementById("overlay");
+        t(r).toHaveAttribute("data-state", "entering");
+      });
+    }), s("should handle click before interval completes", async () => {
+      a.useFakeTimers(), l(/* @__PURE__ */ n(o, {}));
+      const e = document.getElementById("overlay");
+      t(e).toBeInTheDocument();
+      const r = new MouseEvent("click", { bubbles: !0 });
+      e == null || e.dispatchEvent(r), t(document.getElementById("overlay")).toBeInTheDocument(), a.useRealTimers();
+    }), s("should handle removal of overlay element externally", async () => {
+      a.useFakeTimers(), l(/* @__PURE__ */ n(o, {})), a.advanceTimersByTime(100);
+      const e = document.getElementById("overlay");
+      t(e).toBeInTheDocument(), e == null || e.remove(), t(document.getElementById("overlay")).not.toBeInTheDocument(), a.useRealTimers();
+    });
+  }), d("Multiple Overlays", () => {
+    s("should not create multiple overlay elements", () => {
+      l(/* @__PURE__ */ n(o, {})), l(/* @__PURE__ */ n(o, {})), l(/* @__PURE__ */ n(o, {}));
+      const e = document.querySelectorAll("#overlay");
+      t(e).toHaveLength(1);
+    }), s("should reuse existing overlay element", () => {
+      const { container: e } = l(/* @__PURE__ */ n(o, { state: "entering" })), r = document.getElementById("overlay"), { container: c } = l(/* @__PURE__ */ n(o, { state: "entered" })), i = document.getElementById("overlay");
+      t(r).toBe(i), t(e.innerHTML).toBe(""), t(c.innerHTML).toBe("");
+    });
+  }), d("Cleanup", () => {
+    s("should properly clean up when component unmounts", async () => {
+      a.useFakeTimers();
+      const { unmount: e } = l(/* @__PURE__ */ n(o, {}));
+      a.advanceTimersByTime(100), t(document.getElementById("overlay")).toBeInTheDocument(), e(), t(document.getElementById("overlay")).toBeInTheDocument(), a.useRealTimers();
+    });
+  }), d("Integration", () => {
+    s("should handle complete lifecycle", async () => {
+      a.useFakeTimers();
+      const e = a.fn();
+      document.addEventListener("scripps:overlay:closed", e);
+      const { rerender: r } = l(/* @__PURE__ */ n(o, { state: "entering" }));
+      a.advanceTimersByTime(100), t(document.getElementById("overlay")).toHaveAttribute("data-state", "entering"), r(/* @__PURE__ */ n(o, { state: "entered" })), t(document.getElementById("overlay")).toHaveAttribute("data-state", "entered");
+      const c = document.getElementById("overlay");
+      c && c.click(), t(c).toHaveAttribute("data-state", "exiting"), t(e).toHaveBeenCalled(), a.advanceTimersByTime(200), t(document.getElementById("overlay")).not.toBeInTheDocument(), document.removeEventListener("scripps:overlay:closed", e), a.useRealTimers();
+    }), s("should work with custom append element and state changes", async () => {
+      const e = document.createElement("div");
+      e.id = "custom-container", document.body.appendChild(e);
+      const { rerender: r } = l(/* @__PURE__ */ n(o, { appendToElement: e, state: "entering" }));
+      t(e.contains(document.getElementById("overlay"))).toBe(!0), r(/* @__PURE__ */ n(o, { appendToElement: e, state: "entered" })), t(document.getElementById("overlay")).toHaveAttribute("data-state", "entered"), t(e.contains(document.getElementById("overlay"))).toBe(!0);
+    });
+  });
+});