diff --git a/bun.lock b/bun.lock index a422adda..2960d3f5 100644 --- a/bun.lock +++ b/bun.lock @@ -688,7 +688,7 @@ }, "packages/ui": { "name": "@wrnexus/ui", - "version": "0.8.65", + "version": "0.8.66", "dependencies": { "@wrnexus/core": "workspace:*", }, diff --git a/packages/ui/components/Drawer.wrn b/packages/ui/components/Drawer.wrn index cc93e05d..24c5ff18 100644 --- a/packages/ui/components/Drawer.wrn +++ b/packages/ui/components/Drawer.wrn @@ -150,7 +150,7 @@ open: boolean = false aria-label='{closeLabel}' @click='hideDrawer("close-button", event)' > - + {/if} @@ -397,7 +397,7 @@ open: boolean = false .wrn-drawer__header { display: flex; - align-items: flex-start; + align-items: center; justify-content: space-between; gap: 1rem; padding: 1.35rem 1.35rem 1.1rem; @@ -519,6 +519,12 @@ open: boolean = false display: none; } + @media (max-width: 767px) { + .wrn-drawer__header { + padding-block: 0.75rem; + } + } + @media (max-width: 639px) { .wrn-drawer[data-placement="right"] .wrn-drawer__panel, .wrn-drawer[data-placement="left"] .wrn-drawer__panel { diff --git a/packages/ui/package.json b/packages/ui/package.json index 0b8ae288..7ae7b0ee 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/ui", - "version": "0.8.65", + "version": "0.8.66", "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 681b8b0e..5fb7397a 100644 --- a/packages/ui/test/account-shell-regressions.test.ts +++ b/packages/ui/test/account-shell-regressions.test.ts @@ -8,6 +8,23 @@ import { Window } from "happy-dom"; const source = (name: string) => readFileSync(uiComponentPath(name), "utf8"); describe("account shell UI regressions", () => { + test("Drawer has a self-contained close icon and a compact centered mobile header", async () => { + const dom = mountHtml( + await renderComponent(source("Drawer"), { title: "Account center", open: true, duration: 0 }), + ); + const close = dom.querySelector(".wrn-drawer__close") as HTMLButtonElement; + expect(close.getAttribute("aria-label")).toBe("Close drawer"); + expect(close.querySelector('svg[aria-hidden="true"] path')).not.toBeNull(); + expect(close.querySelector('[class*="icon-"]')).toBeNull(); + expect(source("Drawer")).toMatch(/\.wrn-drawer__header\s*\{[^}]*align-items: center;/); + expect(source("Drawer")).toContain("padding-block: 0.75rem;"); + let closed = false; + dom.querySelector('[data-ui-component="Drawer"]')?.addEventListener("wrnexus:close", () => { + closed = true; + }); + close.click(); + expect(closed).toBe(true); + }); test("Dropdown allows anchored mobile menus without changing existing sheet defaults", async () => { for (const mobilePanel of [undefined, "dropdown", "sheet"]) { const dom = mountHtml(