fix(ui): hide dropdown panels in server-rendered markup

bun.lock

@@ -688,7 +688,7 @@
     },
     "packages/ui": {
       "name": "@wrnexus/ui",
-      "version": "0.8.62",
+      "version": "0.8.63",
       "dependencies": {
         "@wrnexus/core": "workspace:*",
       },

packages/ui/components/Dropdown.wrn

@@ -184,7 +184,7 @@ items: unknown[] = []
         <button
           type="button"
           class="wrn-dropdown__dismiss-layer"
-          data-show='{open || visible}'
+          hidden='{!(open || visible)}'
           aria-label="Close menu"
           @click='hideMenu("outside", event)'
         ></button>
@@ -193,7 +193,7 @@ items: unknown[] = []
       <div
         class="wrn-dropdown__panel"
         data-wrn-anchored="true"
-        data-show='{open || visible}'
+        hidden='{!(open || visible)}'
         role="menu"
         aria-label='{menuLabel}'
       >

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ui",
-  "version": "0.8.62",
+  "version": "0.8.63",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/ui/test/account-shell-regressions.test.ts

@@ -3,10 +3,36 @@ import { readFileSync } from "node:fs";
 import { renderComponent, mountHtml } from "../../test/src/index.ts";
 import { uiComponentPath } from "../src/registry.ts";
 import { parse } from "../../compiler/src/index.ts";
+import { Window } from "happy-dom";
 
 const source = (name: string) => readFileSync(uiComponentPath(name), "utf8");
 
 describe("account shell UI regressions", () => {
+  test("Dropdown is natively hidden before CSS or hydration and still toggles afterward", async () => {
+    for (const props of [{}, { open: true }, { defaultOpen: true }]) {
+      const html = await renderComponent(source("Dropdown"), { label: "User", ...props });
+      const server = new Window();
+      try {
+        server.document.body.innerHTML = html;
+        const closed = !(props.open || props.defaultOpen);
+        for (const selector of [".wrn-dropdown__panel", ".wrn-dropdown__dismiss-layer"]) {
+          expect(server.document.querySelector(selector)?.hasAttribute("hidden")).toBe(closed);
+        }
+      } finally {
+        await server.happyDOM.close();
+      }
+    }
+    const dom = mountHtml(await renderComponent(source("Dropdown"), { label: "User" }));
+    const trigger = dom.querySelector(".wrn-dropdown__trigger") as HTMLButtonElement;
+    const panel = dom.querySelector(".wrn-dropdown__panel")!;
+    expect(panel.hasAttribute("hidden")).toBe(true);
+    trigger.click();
+    expect(panel.hasAttribute("hidden")).toBe(false);
+    expect(trigger.getAttribute("aria-expanded")).toBe("true");
+    trigger.click();
+    expect(panel.hasAttribute("hidden")).toBe(true);
+  });
+
   test("Sidebar supplies navigation to its mobile Drawer without an app slot", async () => {
     const dom = mountHtml(
       await renderComponent(source("Sidebar"), {