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

package/dist/components/DrawerNavigation/DrawerNavigation.test.js

@@ -0,0 +1,316 @@
+import { jsx as o } from "react/jsx-runtime";
+import { d, b, a as w, i as a, r, g as n, s, w as p, f as B, c as _, v as T } from "../../react.esm-DLSrfVwM.mjs";
+import { u } from "../../index-BUN4jQ3m.mjs";
+import "../../index-BVxBrkZB.mjs";
+import { DrawerNavigation as i } from "./DrawerNavigation.js";
+const h = () => [
+  { href: "/home", label: "Home" },
+  { href: "/about", label: "About" },
+  { href: "/contact", label: "Contact" }
+], y = () => [
+  {
+    href: "https://example.com/1",
+    image: { url: "/logo1.png", width: 100, height: 50, altText: "", aspectRatio: 2 },
+    altText: "",
+    title: "Partner 1"
+  },
+  {
+    href: "https://example.com/2",
+    image: { url: "/logo2.png", width: 100, height: 50, altText: "", aspectRatio: 2 },
+    altText: "",
+    title: "Partner 2"
+  }
+], v = () => ({
+  image: { url: "/main-logo.png", width: 150, height: 75, altText: "", aspectRatio: 2 },
+  href: "/",
+  baselineAdjustment: 5,
+  height: 60
+});
+d("DrawerNavigation", () => {
+  let g;
+  b(() => {
+    g = document.createElement("div"), g.id = "root", document.body.appendChild(g);
+  }), w(() => {
+    document.body.removeChild(g), document.body.style.overflowY = "";
+  }), d("Basic Rendering", () => {
+    a("should render navigation bar", () => {
+      const { container: t } = r(/* @__PURE__ */ o(i, {})), e = t.querySelector(".drawer-navigation__nav-bar");
+      n(e).toBeInTheDocument();
+    }), a("should render menu toggle button", () => {
+      r(/* @__PURE__ */ o(i, {}));
+      const t = s.getByRole("button", { name: /menu/i });
+      n(t).toBeInTheDocument();
+    }), a("should render primary navigation", () => {
+      const { container: t } = r(/* @__PURE__ */ o(i, {})), e = t.querySelector(".drawer-navigation__primary-navigation");
+      n(e).toBeInTheDocument();
+    }), a("should have correct id on primary navigation", () => {
+      const { container: t } = r(/* @__PURE__ */ o(i, {})), e = t.querySelector("#drawer-navigation__primary-navigation");
+      n(e).toBeInTheDocument();
+    }), a("should render hamburger icon", () => {
+      const { container: t } = r(/* @__PURE__ */ o(i, {})), e = t.querySelector(".drawer-navigation__hamburger");
+      n(e).toBeInTheDocument();
+    }), a("should have visually hidden menu text", () => {
+      const { container: t } = r(/* @__PURE__ */ o(i, {})), e = t.querySelector(".visually-hidden");
+      n(e).toHaveTextContent("Menu");
+    });
+  }), d("Menu Toggle Functionality", () => {
+    a("should start with menu closed", () => {
+      r(/* @__PURE__ */ o(i, {}));
+      const t = s.getByRole("button", { name: /menu/i });
+      n(t).toHaveAttribute("aria-expanded", "false");
+    }), a("should open menu when button clicked", async () => {
+      const t = u.setup();
+      r(/* @__PURE__ */ o(i, {}));
+      const e = s.getByRole("button", { name: /menu/i });
+      await t.click(e), n(e).toHaveAttribute("aria-expanded", "true");
+    }), a("should close menu when button clicked again", async () => {
+      const t = u.setup();
+      r(/* @__PURE__ */ o(i, {}));
+      const e = s.getByRole("button", { name: /menu/i });
+      await t.click(e), await t.click(e), n(e).toHaveAttribute("aria-expanded", "false");
+    }), a("should set body overflow hidden when menu opens", async () => {
+      const t = u.setup();
+      r(/* @__PURE__ */ o(i, {}));
+      const e = s.getByRole("button", { name: /menu/i });
+      await t.click(e), n(document.body.style.overflowY).toBe("hidden");
+    }), a("should update primary navigation data-state when opened", async () => {
+      const t = u.setup(), { container: e } = r(/* @__PURE__ */ o(i, {})), c = s.getByRole("button", { name: /menu/i });
+      await t.click(c);
+      const l = e.querySelector("#drawer-navigation__primary-navigation");
+      n(l).toHaveAttribute("data-state", "opened");
+    }), a("should update primary navigation data-state when closed", async () => {
+      const t = u.setup(), { container: e } = r(/* @__PURE__ */ o(i, {})), c = s.getByRole("button", { name: /menu/i });
+      await t.click(c), await t.click(c);
+      const l = e.querySelector("#drawer-navigation__primary-navigation");
+      n(l).toHaveAttribute("data-state", "closing");
+    });
+  }), d("Logo Rendering", () => {
+    a("should render logo when provided", () => {
+      const t = v(), { container: e } = r(/* @__PURE__ */ o(i, { logo: t })), c = e.querySelector("img");
+      n(c).toBeInTheDocument();
+    }), a("should not render logo when not provided", () => {
+      const { container: t } = r(/* @__PURE__ */ o(i, {})), e = t.querySelector("img");
+      n(e).not.toBeInTheDocument();
+    }), a("should apply with-logo class when logo provided", () => {
+      const t = v(), { container: e } = r(/* @__PURE__ */ o(i, { logo: t })), c = e.querySelector(".drawer-navigation__nav-bar");
+      n(c).toHaveClass("with-logo");
+    }), a("should not apply with-logo class when logo not provided", () => {
+      const { container: t } = r(/* @__PURE__ */ o(i, { logo: {} })), e = t.querySelector(".drawer-navigation__nav-bar");
+      n(e).not.toHaveClass("with-logo");
+    }), a("should pass correct props to ImageReplacementAnchor", () => {
+      const t = v(), { container: e } = r(/* @__PURE__ */ o(i, { logo: t })), c = e.querySelector("a");
+      n(c).toHaveAttribute("href", "/");
+    });
+  }), d("NavList Rendering", () => {
+    a("should render NavList when links provided", () => {
+      const t = h();
+      r(/* @__PURE__ */ o(i, { links: t })), n(s.getByText("Home")).toBeInTheDocument(), n(s.getByText("About")).toBeInTheDocument(), n(s.getByText("Contact")).toBeInTheDocument();
+    }), a("should not render NavList when links array is empty", () => {
+      r(/* @__PURE__ */ o(i, { links: [] })), n(s.queryByText("Home")).not.toBeInTheDocument();
+    }), a("should not render NavList when links not provided", () => {
+      const { container: t } = r(/* @__PURE__ */ o(i, {})), e = t.querySelector('[class*="nav-list"]');
+      n(e).not.toBeInTheDocument();
+    }), a("should pass classname prop to NavList", () => {
+      const t = h(), { container: e } = r(/* @__PURE__ */ o(i, { classname: "custom-class", links: t })), c = e.querySelector(".custom-class");
+      n(c).toBeInTheDocument();
+    });
+  }), d("LogoNavigation Rendering", () => {
+    a("should render LogoNavigation when items provided", () => {
+      const t = y();
+      r(/* @__PURE__ */ o(i, { items: t }));
+      const e = document.querySelector("logo-navigation");
+      n(e).toBeInTheDocument();
+      const c = e == null ? void 0 : e.querySelectorAll("img");
+      n(c == null ? void 0 : c.length).toBe(2);
+    }), a("should not render LogoNavigation when items array is empty", () => {
+      r(/* @__PURE__ */ o(i, { items: [] })), n(s.queryByAltText("Logo 1")).not.toBeInTheDocument();
+    }), a("should render separator when items provided", () => {
+      const t = y(), { container: e } = r(/* @__PURE__ */ o(i, { items: t })), c = e.querySelector(".drawer-navigation__separator");
+      n(c).toBeInTheDocument();
+    }), a("should not render separator when items not provided", () => {
+      const { container: t } = r(/* @__PURE__ */ o(i, { items: [] })), e = t.querySelector(".drawer-navigation__separator");
+      n(e).not.toBeInTheDocument();
+    });
+  }), d("Overlay Rendering", () => {
+    a("should not render overlay initially", () => {
+      r(/* @__PURE__ */ o(i, {}));
+      const t = document.querySelector("#overlay");
+      n(t).not.toBeInTheDocument();
+    }), a("should render overlay when menu is opened", async () => {
+      const t = u.setup();
+      r(/* @__PURE__ */ o(i, {}));
+      const e = s.getByRole("button", { name: /menu/i });
+      await t.click(e), await p(() => {
+        const c = document.querySelector('[class*="overlay"]');
+        n(c).toBeInTheDocument();
+      });
+    }), a("should pass appendToElement prop to Overlay", async () => {
+      const t = u.setup(), e = document.createElement("div");
+      e.id = "custom-container", document.body.appendChild(e), r(/* @__PURE__ */ o(i, { overlayAppendEl: e }));
+      const c = s.getByRole("button", { name: /menu/i });
+      await t.click(c), await p(() => {
+        const l = e.querySelector('[class*="overlay"]');
+        n(l).toBeInTheDocument();
+      }), document.body.removeChild(e);
+    });
+  }), d("Animation States", () => {
+    a("should have closed state initially", () => {
+      const { container: t } = r(/* @__PURE__ */ o(i, {})), e = t.querySelector(".drawer-navigation__nav-bar");
+      n(e == null ? void 0 : e.className).toContain("closed");
+    }), a("should have expanded state when opened", async () => {
+      const t = u.setup(), { container: e } = r(/* @__PURE__ */ o(i, {})), c = s.getByRole("button", { name: /menu/i });
+      await t.click(c);
+      const l = e.querySelector(".drawer-navigation__nav-bar");
+      n(l == null ? void 0 : l.className).toContain("expanded");
+    }), a("should have closing state when closing", async () => {
+      const t = u.setup(), { container: e } = r(/* @__PURE__ */ o(i, {})), c = s.getByRole("button", { name: /menu/i });
+      await t.click(c), await t.click(c);
+      const l = e.querySelector(".drawer-navigation__nav-bar");
+      n(l == null ? void 0 : l.className).toContain("closing");
+    }), a("should handle animationEnd event", async () => {
+      const t = u.setup(), { container: e } = r(/* @__PURE__ */ o(i, {})), c = s.getByRole("button", { name: /menu/i }), l = e.querySelector("#drawer-navigation__primary-navigation");
+      await t.click(c), await t.click(c), B.animationEnd(l);
+      const m = e.querySelector(".drawer-navigation__nav-bar");
+      n(m == null ? void 0 : m.className).toContain("closed");
+    });
+  }), d("Custom Clip Path", () => {
+    a("should use default clip path values", () => {
+      const { container: t } = r(/* @__PURE__ */ o(i, {})), e = t.querySelector("#drawer-navigation__primary-navigation");
+      n(e.style.getPropertyValue("--clip-path-start")).toBe("circle(0% at top right)"), n(e.style.getPropertyValue("--clip-path-end")).toBe("circle(250% at top right)");
+    }), a("should use custom clip path start", () => {
+      const { container: t } = r(/* @__PURE__ */ o(i, { clipPathStart: "circle(10% at center)" })), e = t.querySelector("#drawer-navigation__primary-navigation");
+      n(e.style.getPropertyValue("--clip-path-start")).toBe("circle(10% at center)");
+    }), a("should use custom clip path end", () => {
+      const { container: t } = r(/* @__PURE__ */ o(i, { clipPathEnd: "circle(300% at bottom left)" })), e = t.querySelector("#drawer-navigation__primary-navigation");
+      n(e.style.getPropertyValue("--clip-path-end")).toBe("circle(300% at bottom left)");
+    }), a("should use both custom clip paths", () => {
+      const { container: t } = r(
+        /* @__PURE__ */ o(
+          i,
+          {
+            clipPathEnd: "circle(400% at center)",
+            clipPathStart: "circle(5% at top left)"
+          }
+        )
+      ), e = t.querySelector("#drawer-navigation__primary-navigation");
+      n(e.style.getPropertyValue("--clip-path-start")).toBe("circle(5% at top left)"), n(e.style.getPropertyValue("--clip-path-end")).toBe("circle(400% at center)");
+    });
+  }), d("Accessibility", () => {
+    a("should have aria-controls attribute on button", () => {
+      r(/* @__PURE__ */ o(i, {}));
+      const t = s.getByRole("button", { name: /menu/i });
+      n(t).toHaveAttribute("aria-controls", "drawer-navigation__primary-navigation");
+    }), a("should have aria-expanded false initially", () => {
+      r(/* @__PURE__ */ o(i, {}));
+      const t = s.getByRole("button", { name: /menu/i });
+      n(t).toHaveAttribute("aria-expanded", "false");
+    }), a("should update aria-expanded when toggled", async () => {
+      const t = u.setup();
+      r(/* @__PURE__ */ o(i, {}));
+      const e = s.getByRole("button", { name: /menu/i });
+      await t.click(e), n(e).toHaveAttribute("aria-expanded", "true"), await t.click(e), n(e).toHaveAttribute("aria-expanded", "false");
+    }), a("should have aria-hidden on hamburger icon", () => {
+      const { container: t } = r(/* @__PURE__ */ o(i, {})), e = t.querySelector(".drawer-navigation__hamburger");
+      n(e).toHaveAttribute("aria-hidden", "true");
+    });
+  }), d("CSS Classes", () => {
+    a("should apply drawer-navigation__nav-bar class", () => {
+      const { container: t } = r(/* @__PURE__ */ o(i, {})), e = t.querySelector(".drawer-navigation__nav-bar");
+      n(e).toBeInTheDocument();
+    }), a("should apply drawer-navigation__menu-toggle class", () => {
+      const { container: t } = r(/* @__PURE__ */ o(i, {})), e = t.querySelector(".drawer-navigation__menu-toggle");
+      n(e).toBeInTheDocument();
+    }), a("should apply drawer-navigation__hamburger class", () => {
+      const { container: t } = r(/* @__PURE__ */ o(i, {})), e = t.querySelector(".drawer-navigation__hamburger");
+      n(e).toBeInTheDocument();
+    }), a("should apply drawer-navigation__primary-navigation class", () => {
+      const { container: t } = r(/* @__PURE__ */ o(i, {})), e = t.querySelector(".drawer-navigation__primary-navigation");
+      n(e).toBeInTheDocument();
+    });
+  }), d("Event Listeners", () => {
+    a("should listen for scripps:overlay:closed event", async () => {
+      const t = u.setup();
+      r(/* @__PURE__ */ o(i, {}));
+      const e = s.getByRole("button", { name: /menu/i });
+      await t.click(e), n(e).toHaveAttribute("aria-expanded", "true");
+      const c = new CustomEvent("scripps:overlay:closed");
+      _(() => {
+        document.dispatchEvent(c);
+      }), await p(() => {
+        n(e).toHaveAttribute("aria-expanded", "false");
+      });
+    }), a("should remove event listener on unmount", () => {
+      const t = T.spyOn(document, "removeEventListener"), { unmount: e } = r(/* @__PURE__ */ o(i, {}));
+      e(), n(t).toHaveBeenCalledWith("scripps:overlay:closed", n.any(Function)), t.mockRestore();
+    });
+  }), d("Edge Cases", () => {
+    a("should handle both links and items together", () => {
+      const t = h(), e = y();
+      r(/* @__PURE__ */ o(i, { items: e, links: t })), n(s.getByText("Home")).toBeInTheDocument();
+      const c = document.querySelector("logo-navigation");
+      n(c).toBeInTheDocument();
+      const l = c == null ? void 0 : c.querySelectorAll("img");
+      n(l == null ? void 0 : l.length).toBe(2);
+    }), a("should handle undefined overlayAppendEl", async () => {
+      const t = u.setup();
+      r(/* @__PURE__ */ o(i, { overlayAppendEl: void 0 }));
+      const e = s.getByRole("button", { name: /menu/i });
+      await t.click(e), n(e).toHaveAttribute("aria-expanded", "true");
+    }), a("should handle empty logo object", () => {
+      const { container: t } = r(/* @__PURE__ */ o(i, { logo: {} })), e = t.querySelector("img");
+      n(e).not.toBeInTheDocument();
+    }), a("should handle rapid toggle clicks", async () => {
+      const t = u.setup();
+      r(/* @__PURE__ */ o(i, {}));
+      const e = s.getByRole("button", { name: /menu/i });
+      await t.click(e), await t.click(e), await t.click(e), n(e).toHaveAttribute("aria-expanded", "true");
+    }), a("should handle logo with only some properties", () => {
+      const { container: t } = r(
+        /* @__PURE__ */ o(i, { logo: { image: { url: "/logo.png", width: 100, height: 50, altText: "", aspectRatio: 2 } } })
+      ), e = t.querySelector("img");
+      n(e).toBeInTheDocument();
+    }), a("should handle single link", () => {
+      r(/* @__PURE__ */ o(i, { links: [{ href: "/single", label: "Single" }] })), n(s.getByText("Single")).toBeInTheDocument();
+    }), a("should handle single item", () => {
+      r(/* @__PURE__ */ o(i, { items: [{
+        href: "https://example.com",
+        image: { url: "/logo.png", width: 100, height: 50, altText: "", aspectRatio: 2 },
+        altText: ""
+      }] }));
+      const e = document.querySelector("logo-navigation");
+      n(e).toBeInTheDocument();
+      const c = e == null ? void 0 : e.querySelectorAll("img");
+      n(c == null ? void 0 : c.length).toBe(1);
+    });
+  }), d("Integration", () => {
+    a("should close menu when clicking a hash link (triggers toggleHandler)", async () => {
+      const t = u.setup(), e = [
+        ...h(),
+        { href: "#section", label: "Section" }
+        // Hash link will trigger toggleHandler
+      ];
+      r(/* @__PURE__ */ o(i, { links: e }));
+      const c = s.getByRole("button", { name: /menu/i });
+      await t.click(c), n(c).toHaveAttribute("aria-expanded", "true");
+      const l = s.getByText("Section");
+      await t.click(l), await p(() => {
+        n(c).toHaveAttribute("aria-expanded", "false");
+      });
+    }), a("should render all components together", () => {
+      const t = h(), e = y(), c = v(), { container: l } = r(
+        /* @__PURE__ */ o(
+          i,
+          {
+            classname: "custom",
+            items: e,
+            links: t,
+            logo: c
+          }
+        )
+      );
+      n(l.querySelector(".drawer-navigation__nav-bar")).toBeInTheDocument(), n(s.getByText("Home")).toBeInTheDocument();
+      const m = document.querySelector("logo-navigation");
+      n(m).toBeInTheDocument(), n(l.querySelector('img[src="/main-logo.png"]')).toBeInTheDocument();
+    });
+  });
+});

package/dist/components/EqualSizeFlexRow/EqualSizeFlexRow.test.js

@@ -0,0 +1,337 @@
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { d as s, b as u, a as C, i as r, r as o, g as t } from "../../react.esm-DLSrfVwM.mjs";
+import "../../index-BVxBrkZB.mjs";
+import { EqualSizeFlexRow as n } from "./EqualSizeFlexRow.js";
+s("EqualSizeFlexRow", () => {
+  let h;
+  u(() => {
+    h = document.createElement("div"), h.id = "root", document.body.appendChild(h);
+  }), C(() => {
+    document.body.removeChild(h);
+  }), s("Basic Rendering", () => {
+    r("should render the custom element", () => {
+      o(/* @__PURE__ */ e(n, { children: /* @__PURE__ */ e("div", { children: "Child" }) }));
+      const l = document.querySelector("equal-size-flex-row");
+      t(l).toBeInTheDocument();
+    }), r("should render single child", () => {
+      const { container: l } = o(
+        /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e("div", { children: "Child 1" }) })
+      );
+      t(l.textContent).toContain("Child 1");
+    }), r("should render multiple children", () => {
+      const { container: l } = o(
+        /* @__PURE__ */ d(n, { children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" }),
+          /* @__PURE__ */ e("div", { children: "Child 3" })
+        ] })
+      );
+      t(l.textContent).toContain("Child 1"), t(l.textContent).toContain("Child 2"), t(l.textContent).toContain("Child 3");
+    }), r("should wrap each child in equal-size-flex-row__item div", () => {
+      o(
+        /* @__PURE__ */ d(n, { children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" })
+        ] })
+      );
+      const l = document.querySelectorAll(".equal-size-flex-row__item");
+      t(l.length).toBe(2);
+    }), r("should set data-item-count attribute", () => {
+      o(
+        /* @__PURE__ */ d(n, { children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" }),
+          /* @__PURE__ */ e("div", { children: "Child 3" })
+        ] })
+      );
+      const l = document.querySelector("equal-size-flex-row");
+      t(l).toHaveAttribute("data-item-count", "3");
+    });
+  }), s("Single Child Special Case", () => {
+    r("should apply 50% flex for single child", () => {
+      o(
+        /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e("div", { children: "Single Child" }) })
+      );
+      const i = document.querySelector("equal-size-flex-row").getAttribute("style");
+      t(i).toContain("--esfr-item-flex: 0 1 50%");
+    }), r("should set data-item-count to 1 for single child", () => {
+      o(
+        /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e("div", { children: "Single Child" }) })
+      );
+      const l = document.querySelector("equal-size-flex-row");
+      t(l).toHaveAttribute("data-item-count", "1");
+    });
+  }), s("Gap Prop", () => {
+    r("should use default gap of 1.5rem", () => {
+      o(
+        /* @__PURE__ */ d(n, { children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" })
+        ] })
+      );
+      const i = document.querySelector("equal-size-flex-row").getAttribute("style");
+      t(i).toContain("--esfr-gap-size: 1.5rem");
+    }), r("should apply custom gap value", () => {
+      o(
+        /* @__PURE__ */ d(n, { gap: "2rem", children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" })
+        ] })
+      );
+      const i = document.querySelector("equal-size-flex-row").getAttribute("style");
+      t(i).toContain("--esfr-gap-size: 2rem");
+    }), r("should use gap in flex calculation", () => {
+      o(
+        /* @__PURE__ */ d(n, { gap: "3rem", maxItemsPerRow: 4, children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" })
+        ] })
+      );
+      const i = document.querySelector("equal-size-flex-row").getAttribute("style");
+      t(i).toContain("--esfr-item-flex: 1 1 calc(50% - 3rem)");
+    });
+  }), s("MaxItemsPerRow Prop", () => {
+    r("should use default maxItemsPerRow of 4", () => {
+      o(
+        /* @__PURE__ */ d(n, { children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" }),
+          /* @__PURE__ */ e("div", { children: "Child 3" })
+        ] })
+      );
+      const i = document.querySelector("equal-size-flex-row").getAttribute("style");
+      t(i).toContain("--esfr-item-flex: 1 1 calc("), t(i).toContain("% - 1.5rem)");
+    }), r("should respect custom maxItemsPerRow", () => {
+      o(
+        /* @__PURE__ */ d(n, { maxItemsPerRow: 2, children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" })
+        ] })
+      );
+      const i = document.querySelector("equal-size-flex-row").getAttribute("style");
+      t(i).toContain("--esfr-item-flex: 1 1 calc(50% - 1.5rem)");
+    }), r("should set nowrap when children <= maxItemsPerRow", () => {
+      o(
+        /* @__PURE__ */ d(n, { maxItemsPerRow: 4, children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" }),
+          /* @__PURE__ */ e("div", { children: "Child 3" })
+        ] })
+      );
+      const i = document.querySelector("equal-size-flex-row").getAttribute("style");
+      t(i).toContain("--esfr-flex-wrap: nowrap");
+    }), r("should set wrap when children > maxItemsPerRow", () => {
+      o(
+        /* @__PURE__ */ d(n, { maxItemsPerRow: 2, children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" }),
+          /* @__PURE__ */ e("div", { children: "Child 3" })
+        ] })
+      );
+      const i = document.querySelector("equal-size-flex-row").getAttribute("style");
+      t(i).toContain("--esfr-flex-wrap: wrap");
+    });
+  }), s("Flex Calculation", () => {
+    r("should calculate correct flex for 2 children with max 4", () => {
+      o(
+        /* @__PURE__ */ d(n, { maxItemsPerRow: 4, children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" })
+        ] })
+      );
+      const i = document.querySelector("equal-size-flex-row").getAttribute("style");
+      t(i).toContain("--esfr-item-flex: 1 1 calc(50% - 1.5rem)");
+    }), r("should calculate correct flex for 3 children with max 4", () => {
+      o(
+        /* @__PURE__ */ d(n, { maxItemsPerRow: 4, children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" }),
+          /* @__PURE__ */ e("div", { children: "Child 3" })
+        ] })
+      );
+      const i = document.querySelector("equal-size-flex-row").getAttribute("style");
+      t(i).toContain("--esfr-item-flex: 1 1 calc("), t(i).toContain("% - 1.5rem)");
+    }), r("should calculate correct flex for 4 children with max 4", () => {
+      o(
+        /* @__PURE__ */ d(n, { maxItemsPerRow: 4, children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" }),
+          /* @__PURE__ */ e("div", { children: "Child 3" }),
+          /* @__PURE__ */ e("div", { children: "Child 4" })
+        ] })
+      );
+      const i = document.querySelector("equal-size-flex-row").getAttribute("style");
+      t(i).toContain("--esfr-item-flex: 1 1 calc(25% - 1.5rem)");
+    }), r("should calculate correct flex for 5 children with max 4", () => {
+      o(
+        /* @__PURE__ */ d(n, { maxItemsPerRow: 4, children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" }),
+          /* @__PURE__ */ e("div", { children: "Child 3" }),
+          /* @__PURE__ */ e("div", { children: "Child 4" }),
+          /* @__PURE__ */ e("div", { children: "Child 5" })
+        ] })
+      );
+      const i = document.querySelector("equal-size-flex-row").getAttribute("style");
+      t(i).toContain("--esfr-item-flex: 0 1 calc(25% - 1.5rem)");
+    }), r("should use flex-grow 1 when children <= maxItemsPerRow", () => {
+      o(
+        /* @__PURE__ */ d(n, { maxItemsPerRow: 3, children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" })
+        ] })
+      );
+      const i = document.querySelector("equal-size-flex-row").getAttribute("style");
+      t(i).toContain("--esfr-item-flex: 1 1 calc(");
+    }), r("should use flex-grow 0 when children > maxItemsPerRow", () => {
+      o(
+        /* @__PURE__ */ d(n, { maxItemsPerRow: 2, children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" }),
+          /* @__PURE__ */ e("div", { children: "Child 3" })
+        ] })
+      );
+      const i = document.querySelector("equal-size-flex-row").getAttribute("style");
+      t(i).toContain("--esfr-item-flex: 0 1 calc(");
+    });
+  }), s("CSS Custom Properties", () => {
+    r("should set all three CSS custom properties", () => {
+      o(
+        /* @__PURE__ */ d(n, { gap: "2rem", maxItemsPerRow: 3, children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" })
+        ] })
+      );
+      const i = document.querySelector("equal-size-flex-row").getAttribute("style");
+      t(i).toContain("--esfr-gap-size"), t(i).toContain("--esfr-item-flex"), t(i).toContain("--esfr-flex-wrap");
+    }), r("should update CSS properties when props change", () => {
+      const { rerender: l } = o(
+        /* @__PURE__ */ d(n, { gap: "1rem", children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" })
+        ] })
+      );
+      let i = document.querySelector("equal-size-flex-row"), c = i.getAttribute("style");
+      t(c).toContain("--esfr-gap-size: 1rem"), l(
+        /* @__PURE__ */ d(n, { gap: "3rem", children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" })
+        ] })
+      ), i = document.querySelector("equal-size-flex-row"), c = i.getAttribute("style"), t(c).toContain("--esfr-gap-size: 3rem");
+    });
+  }), s("Children Handling", () => {
+    r("should handle React elements as children", () => {
+      const { container: l } = o(
+        /* @__PURE__ */ d(n, { children: [
+          /* @__PURE__ */ e("button", { children: "Button 1" }),
+          /* @__PURE__ */ e("button", { children: "Button 2" })
+        ] })
+      ), i = l.querySelectorAll("button");
+      t(i.length).toBe(2);
+    }), r("should handle text nodes as children", () => {
+      const { container: l } = o(
+        /* @__PURE__ */ d(n, { children: [
+          /* @__PURE__ */ e("span", { children: "Text 1" }),
+          /* @__PURE__ */ e("span", { children: "Text 2" })
+        ] })
+      );
+      t(l.textContent).toContain("Text 1"), t(l.textContent).toContain("Text 2");
+    }), r("should preserve child props when cloning", () => {
+      const { container: l } = o(
+        /* @__PURE__ */ d(n, { children: [
+          /* @__PURE__ */ e("div", { className: "custom-class", "data-testid": "child1", children: "Child 1" }),
+          /* @__PURE__ */ e("div", { className: "another-class", "data-testid": "child2", children: "Child 2" })
+        ] })
+      ), i = l.querySelector('[data-testid="child1"]'), c = l.querySelector('[data-testid="child2"]');
+      t(i).toHaveClass("custom-class"), t(c).toHaveClass("another-class");
+    }), r("should handle mixed content types", () => {
+      const { container: l } = o(
+        /* @__PURE__ */ d(n, { children: [
+          /* @__PURE__ */ e("div", { children: "Div element" }),
+          /* @__PURE__ */ e("button", { children: "Button element" }),
+          /* @__PURE__ */ e("span", { children: "Span element" })
+        ] })
+      );
+      t(l.querySelector("div")).toBeInTheDocument(), t(l.querySelector("button")).toBeInTheDocument(), t(l.querySelector("span")).toBeInTheDocument();
+    });
+  }), s("Edge Cases", () => {
+    r("should handle zero children gracefully", () => {
+      o(/* @__PURE__ */ e(n, { children: [] }));
+      const l = document.querySelector("equal-size-flex-row");
+      t(l).toBeInTheDocument(), t(l).toHaveAttribute("data-item-count", "0");
+    }), r("should handle very large number of children", () => {
+      const l = Array.from({ length: 20 }, (a, m) => /* @__PURE__ */ d("div", { children: [
+        "Child ",
+        m + 1
+      ] }, m));
+      o(
+        /* @__PURE__ */ e(n, { maxItemsPerRow: 4, children: l })
+      );
+      const i = document.querySelector("equal-size-flex-row");
+      t(i).toHaveAttribute("data-item-count", "20");
+      const c = document.querySelectorAll(".equal-size-flex-row__item");
+      t(c.length).toBe(20);
+    }), r("should handle maxItemsPerRow of 1", () => {
+      o(
+        /* @__PURE__ */ d(n, { maxItemsPerRow: 1, children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" })
+        ] })
+      );
+      const i = document.querySelector("equal-size-flex-row").getAttribute("style");
+      t(i).toContain("--esfr-flex-wrap: wrap"), t(i).toContain("--esfr-item-flex: 0 1 calc(100% - 1.5rem)");
+    }), r("should handle gap with different units", () => {
+      o(
+        /* @__PURE__ */ d(n, { gap: "20px", children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" })
+        ] })
+      );
+      const i = document.querySelector("equal-size-flex-row").getAttribute("style");
+      t(i).toContain("--esfr-gap-size: 20px"), t(i).toContain("calc(50% - 20px)");
+    }), r("should handle gap of 0", () => {
+      o(
+        /* @__PURE__ */ d(n, { gap: "0", children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" })
+        ] })
+      );
+      const i = document.querySelector("equal-size-flex-row").getAttribute("style");
+      t(i).toContain("--esfr-gap-size: 0"), t(i).toContain("calc(50% - 0)");
+    });
+  }), s("Integration", () => {
+    r("should correctly render with all props and multiple children", () => {
+      const { container: l } = o(
+        /* @__PURE__ */ d(n, { gap: "2.5rem", maxItemsPerRow: 3, children: [
+          /* @__PURE__ */ e("div", { className: "item-1", children: "Item 1" }),
+          /* @__PURE__ */ e("div", { className: "item-2", children: "Item 2" }),
+          /* @__PURE__ */ e("div", { className: "item-3", children: "Item 3" }),
+          /* @__PURE__ */ e("div", { className: "item-4", children: "Item 4" })
+        ] })
+      ), i = document.querySelector("equal-size-flex-row");
+      t(i).toHaveAttribute("data-item-count", "4");
+      const c = i.getAttribute("style");
+      t(c).toContain("--esfr-gap-size: 2.5rem"), t(c).toContain("--esfr-flex-wrap: wrap"), t(c).toContain("--esfr-item-flex: 0 1 calc(");
+      const a = l.querySelectorAll(".equal-size-flex-row__item");
+      t(a.length).toBe(4), t(l.querySelector(".item-1")).toBeInTheDocument(), t(l.querySelector(".item-2")).toBeInTheDocument(), t(l.querySelector(".item-3")).toBeInTheDocument(), t(l.querySelector(".item-4")).toBeInTheDocument();
+    }), r("should handle dynamic children updates", () => {
+      const { rerender: l, container: i } = o(
+        /* @__PURE__ */ d(n, { maxItemsPerRow: 3, children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" })
+        ] })
+      );
+      let c = document.querySelector("equal-size-flex-row");
+      t(c).toHaveAttribute("data-item-count", "2"), l(
+        /* @__PURE__ */ d(n, { maxItemsPerRow: 3, children: [
+          /* @__PURE__ */ e("div", { children: "Child 1" }),
+          /* @__PURE__ */ e("div", { children: "Child 2" }),
+          /* @__PURE__ */ e("div", { children: "Child 3" }),
+          /* @__PURE__ */ e("div", { children: "Child 4" })
+        ] })
+      ), c = document.querySelector("equal-size-flex-row"), t(c).toHaveAttribute("data-item-count", "4");
+      const a = i.querySelectorAll(".equal-size-flex-row__item");
+      t(a.length).toBe(4);
+    });
+  });
+});