From 6123a6865ef94542862292e27f67867883026781 Mon Sep 17 00:00:00 2001
From: Ajay Ghanwat <ghanwat.ajay@workroot.in>
Date: Wed, 26 Aug 2026 19:29:21 +0530
Subject: [PATCH] fix(ui): hide dropdown panels in server-rendered markup

---
 bun.lock                                      |  2 +-
 packages/ui/components/Dropdown.wrn           |  4 +--
 packages/ui/package.json                      |  2 +-
 .../ui/test/account-shell-regressions.test.ts | 26 +++++++++++++++++++
 4 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/bun.lock b/bun.lock
index a220ab93..becaf248 100644
--- a/bun.lock
+++ b/bun.lock
@@ -688,7 +688,7 @@
     },
     "packages/ui": {
       "name": "@wrnexus/ui",
-      "version": "0.8.62",
+      "version": "0.8.63",
       "dependencies": {
         "@wrnexus/core": "workspace:*",
       },
diff --git a/packages/ui/components/Dropdown.wrn b/packages/ui/components/Dropdown.wrn
index 4b099e97..73575bfe 100644
--- a/packages/ui/components/Dropdown.wrn
+++ b/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}'
       >
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 2e778586..f9590375 100644
--- a/packages/ui/package.json
+++ b/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",
diff --git a/packages/ui/test/account-shell-regressions.test.ts b/packages/ui/test/account-shell-regressions.test.ts
index f66e1941..9a23094e 100644
--- a/packages/ui/test/account-shell-regressions.test.ts
+++ b/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"), {