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

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"), {