fix(ui): allow trigger-anchored dropdowns on mobile

bun.lock

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

packages/ui/components/Dropdown.wrn

@@ -17,6 +17,7 @@ items: unknown[] = []
     showChevron: boolean = true
     menuLabel: string = "Dropdown menu"
     placement: string = "bottom-start"
+    mobilePanel: string = "sheet"
     width: string = "md"
     size: string = "default"
     color: string = "primary"
@@ -151,6 +152,7 @@ items: unknown[] = []
       data-ui-component="Dropdown"
       data-open='{open || visible ? "true" : "false"}'
       data-placement='{placement}'
+      data-mobile-panel='{mobilePanel}'
       data-width='{width}'
       data-size='{size}'
       data-color='{color}'
@@ -572,7 +574,7 @@ items: unknown[] = []
     }
 
     @media (max-width: 639px) {
-      .wrn-dropdown[data-placement] .wrn-dropdown__panel {
+      .wrn-dropdown[data-placement][data-mobile-panel="sheet"] .wrn-dropdown__panel {
         position: fixed;
         right: 0.75rem;
         bottom: 0.75rem;

packages/ui/package.json

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

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

@@ -8,6 +8,25 @@ import { Window } from "happy-dom";
 const source = (name: string) => readFileSync(uiComponentPath(name), "utf8");
 
 describe("account shell UI regressions", () => {
+  test("Dropdown allows anchored mobile menus without changing existing sheet defaults", async () => {
+    for (const mobilePanel of [undefined, "dropdown", "sheet"]) {
+      const dom = mountHtml(
+        await renderComponent(source("Dropdown"), {
+          label: "User",
+          placement: "bottom-end",
+          ...(mobilePanel ? { mobilePanel } : {}),
+        }),
+      );
+      expect(dom.querySelector(".wrn-dropdown")?.getAttribute("data-mobile-panel")).toBe(
+        mobilePanel ?? "sheet",
+      );
+      (dom.querySelector(".wrn-dropdown__trigger") as HTMLButtonElement).click();
+      expect(dom.querySelector(".wrn-dropdown__panel")?.hasAttribute("hidden")).toBe(false);
+    }
+    expect(source("Dropdown")).not.toContain(
+      ".wrn-dropdown[data-placement] .wrn-dropdown__panel {",
+    );
+  });
   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 });
@@ -189,7 +208,9 @@ describe("account shell UI regressions", () => {
       /\.wrn-sidebar__icon\s*\{[^}]*width: 1.05rem;[^}]*height: 1.05rem;/s,
     );
     expect(source("Sidebar")).toContain("margin-inline-start");
-    expect(source("Dropdown")).toContain(".wrn-dropdown[data-placement] .wrn-dropdown__panel");
+    expect(source("Dropdown")).toContain(
+      '.wrn-dropdown[data-placement][data-mobile-panel="sheet"] .wrn-dropdown__panel',
+    );
     expect(source("Footer")).toMatch(/\.wrn-footer__copyright-left\s*\{\s*grid-column: 1;/);
     expect(source("Footer")).toMatch(/\.wrn-footer__copyright-right\s*\{\s*grid-column: 3;/);
   });