+
+ `
+}
diff --git a/src/components/Popup/Popup.ts b/src/components/Popup/Popup.ts
new file mode 100644
index 00000000..bfe4caa7
--- /dev/null
+++ b/src/components/Popup/Popup.ts
@@ -0,0 +1,151 @@
+import { nostojs } from "@nosto/nosto-js"
+import { customElement } from "../decorators"
+import { NostoElement } from "../Element"
+import { popupStyles } from "./styles"
+import { assertRequired } from "@/utils/assertRequired"
+
+/**
+ * A custom element that displays popup content with dialog and ribbon slots.
+ * Supports conditional activation based on Nosto segments and persistent closure state.
+ *
+ * @property {string} name - Required name used for analytics and localStorage persistence. The popup's closed state will be remembered.
+ * @property {string} [segment] - Optional Nosto segment that acts as a precondition for activation. Only users in this segment will see the popup.
+ *
+ * @example
+ * Basic popup with dialog and ribbon content:
+ * ```html
+ *
+ *
+
+ ) as Popup
+
+ document.body.appendChild(popup)
+ await popup.connectedCallback()
+
+ expect(popup.style.display).not.toBe("none")
+ })
+ })
+
+ describe("Named popups and persistence", () => {
+ it("should hide popup if it was previously closed and name is set", async () => {
+ const popupName = "test-popup"
+ setPopupData({ name: popupName, state: "closed" })
+
+ const popup = (
+
+
Content
+
+ ) as Popup
+
+ document.body.appendChild(popup)
+ await popup.connectedCallback()
+
+ expect(popup.style.display).toBe("none")
+ })
+
+ it("should show popup if name is set but not previously closed", async () => {
+ const popup = (
+
+
Content
+
+ ) as Popup
+
+ document.body.appendChild(popup)
+ await popup.connectedCallback()
+
+ expect(popup.style.display).not.toBe("none")
+ })
+
+ it("should throw error when name attribute is missing", async () => {
+ const popup = (
+
+
Content
+
+ ) as Popup
+
+ // Don't append to DOM to avoid automatic connectedCallback call
+ // that would cause unhandled error
+ await expect(popup.connectedCallback()).rejects.toThrow("Property name is required.")
+ })
+ })
+
+ describe("Segment-based activation", () => {
+ it("should show popup when user has matching segment", async () => {
+ mockNostojs({
+ internal: {
+ getSegments: () => Promise.resolve(["segment1", "target-segment", "segment3"])
+ }
+ })
+
+ const popup = (
+
+
Content
+
+ ) as Popup
+
+ document.body.appendChild(popup)
+ await popup.connectedCallback()
+
+ expect(popup.style.display).not.toBe("none")
+ })
+
+ it("should hide popup when user does not have matching segment", async () => {
+ mockNostojs({
+ internal: {
+ getSegments: () => Promise.resolve(["segment1", "segment2", "segment3"])
+ }
+ })
+
+ const popup = (
+
+
Content
+
+ ) as Popup
+
+ document.body.appendChild(popup)
+ await popup.connectedCallback()
+
+ expect(popup.style.display).toBe("none")
+ })
+
+ it("should show popup when no segment attribute is specified", async () => {
+ const popup = (
+
+
+
+ ) as Popup
+
+ // Don't append to DOM to avoid automatic connectedCallback call
+ // that would cause unhandled error
+ await expect(popup.connectedCallback()).rejects.toThrow("API Error")
+ })
+ })
+
+ describe("Click handling and closing", () => {
+ it("should close popup when element with n-close attribute is clicked", async () => {
+ const popup = (
+
+
+
+
+
+ ) as Popup
+
+ document.body.appendChild(popup)
+ await popup.connectedCallback()
+
+ expect(popup.style.display).not.toBe("none")
+
+ const closeButton = popup.querySelector("[n-close]") as HTMLButtonElement
+ expect(closeButton).toBeTruthy()
+
+ closeButton.click()
+
+ expect(popup.style.display).toBe("none")
+ })
+
+ it("should store closed state in localStorage when popup has name", async () => {
+ const popupName = "persistent-popup"
+ const popup = (
+
+
+
+
+
+ ) as Popup
+
+ document.body.appendChild(popup)
+ await popup.connectedCallback()
+
+ const closeButton = popup.querySelector("[n-close]") as HTMLButtonElement
+ closeButton.click()
+
+ expect(getPopupData()).toEqual({ name: popupName, state: "closed" })
+ })
+
+ it("should always store closed state in localStorage since name is required", async () => {
+ const popup = (
+
+