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

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;/);
   });