feat: release design system engine, studio and component contracts

packages/test/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/test",
-  "version": "0.8.16",
+  "version": "0.8.18",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/test/src/index.ts

@@ -100,6 +100,8 @@ export function mountHtml(html: string): {
   const g = globalThis as Record<string, unknown>;
   g.window = win;
   g.document = win.document;
+  // Runtime-dispatched events must belong to the simulated browser, not Bun.
+  g.CustomEvent = win.CustomEvent;
   g.NodeFilter = win.NodeFilter;
   g.HTMLInputElement = win.HTMLInputElement;
   g.HTMLOptionElement = win.HTMLOptionElement;

packages/test/test/test-utils.test.ts

@@ -11,7 +11,9 @@ import { runWithRequestContext, renderControlTemplates } from "@wrnexus/core";
 
 test("temporary component modules use the same core request context as the caller", async () => {
   await runWithRequestContext({} as never, async () => {
-    const html = await renderComponent(`component Conditional {\n state open = true\n view { {#if open}<p>Visible</p>{/if} }\n }`);
+    const html = await renderComponent(
+      `component Conditional {\n state open = true\n view { {#if open}<p>Visible</p>{/if} }\n }`,
+    );
     expect(html).toContain('data-wrn-if="@wrn-controls-');
     expect(renderControlTemplates()).toContain("Visible");
   });
@@ -40,6 +42,25 @@ test("mountHtml hydrates the reactive runtime for DOM assertions", () => {
   expect(dom.querySelectorAll("li").map((li) => li.textContent)).toEqual(["a", "b"]);
 });
 
+test("mountHtml delivers runtime menu events to simulated browser listeners", () => {
+  const dom = mountHtml(`
+    <nav data-wrn-navbar>
+      <div data-wrn-menu data-open="false" class="wrn-navbar__dropdown">
+        <button data-wrn-menu-toggle aria-expanded="false">Menu</button>
+      </div>
+    </nav>
+  `);
+  const changes: boolean[] = [];
+  dom.document.addEventListener("wrn-menu-toggle", (event) => {
+    changes.push((event as CustomEvent<{ open: boolean }>).detail.open);
+  });
+  const button = dom.querySelector("button") as HTMLButtonElement;
+  button.click();
+  button.click();
+  expect(changes).toEqual([true, false]);
+  expect(button.getAttribute("aria-expanded")).toBe("false");
+});
+
 test("callRoute invokes an API handler with a Context", async () => {
   const handler = (ctx: import("@wrnexus/core").Context) =>
     Response.json({ ok: true, path: ctx.url.pathname, method: ctx.req.method });