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(