feat(ui): build MegaMenu and rebuild Sidebar on Drawer

MegaMenu replaces a scaffold with a trigger and a wide panel of grouped link
columns. One level deep on purpose: a mega menu exists to show breadth flat so
everything is one click away, and nesting inside the panel buries content
behind hover-within-hover. Nav is the component for cascading submenus. The
panel is anchored so the runtime clamp keeps it inside the viewport.

Sidebar now composes Drawer for its off-canvas presentation instead of a
hand-rolled backdrop, inheriting the focus trap and scroll lock from one
place. Single items, labelled groups and branches nested to three levels, with
vertical roving focus.

Sidebar classes move to the BEM naming the rest of the library uses, which is
a breaking change; nesting via children still works, since that is what
shipped in 0.8.5.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

packages/ui/test/ui.test.ts

@@ -365,9 +365,12 @@ test("sidebar renders compact grouped submenu navigation and a mobile drawer tri
     ],
   });
 
-  expect(html).toContain("wire-sidebar-toggle");
-  expect(html).toContain("wire-sidebar-backdrop");
-  expect(html).toContain("wire-sidebar-group");
+  // Classes moved to the BEM naming every other component uses, and the
+  // off-canvas presentation is now Drawer rather than a hand-rolled backdrop.
+  // Nesting via children still works: that is what shipped in 0.8.5.
+  expect(html).toContain("wire-sidebar__launcher");
+  expect(html).toContain("wire-sidebar__sublist");
+  expect(html).toContain('data-component="Drawer"');
   expect(html).toContain("Assigned cases");
   expect(html).toContain("Evidence");
 });
@@ -2687,3 +2690,90 @@ test("tabs vertical orientation switches the roving axis", async () => {
   const dom = mountHtml(html);
   expect(dom.querySelector('[role="tablist"]')!.getAttribute("data-wrn-roving")).toBe("vertical");
 });
+
+test("mega menu renders column groups in an anchored panel", async () => {
+  const source = readFileSync(uiComponentPath("MegaMenu"), "utf8");
+  const html = await renderComponent(source, {
+    label: "Products",
+    columns: [
+      {
+        heading: "Platform",
+        items: [
+          { label: "Runtime", href: "/runtime", description: "The browser half" },
+          { label: "Compiler", href: "/compiler" },
+        ],
+      },
+      { heading: "Company", items: [{ label: "About", href: "/about" }] },
+    ],
+  });
+  const dom = mountHtml(html);
+
+  const trigger = dom.querySelector(".wire-mega__trigger") as HTMLElement;
+  expect(trigger.getAttribute("aria-expanded")).toBe("false");
+  expect(trigger.getAttribute("aria-haspopup")).toBe("true");
+
+  const panel = dom.querySelector(".wire-mega__panel") as HTMLElement;
+  expect(panel.getAttribute("data-wrn-anchored")).toBe("true");
+  expect(dom.querySelectorAll(".wire-mega__column")).toHaveLength(2);
+  expect(dom.querySelectorAll(".wire-mega__link").length).toBeGreaterThanOrEqual(3);
+  expect(dom.querySelector(".wire-mega__heading")!.textContent).toContain("Platform");
+  // Single level by design: a mega panel shows breadth flat, so there is no
+  // nested submenu markup to find.
+  expect(source).not.toContain("wire-mega__submenu");
+});
+
+test("mega menu columns take roving focus and survive an empty column list", async () => {
+  const source = readFileSync(uiComponentPath("MegaMenu"), "utf8");
+  const html = await renderComponent(source, { label: "Empty", columns: [] });
+  const dom = mountHtml(html);
+  expect(dom.querySelector(".wire-mega")).not.toBeNull();
+  expect(dom.querySelectorAll(".wire-mega__link")).toHaveLength(0);
+  expect(dom.querySelector('[data-wrn-roving="both"]')).not.toBeNull();
+});
+
+test("sidebar renders single items, labelled groups and nested levels", async () => {
+  const source = readFileSync(uiComponentPath("Sidebar"), "utf8");
+  const html = await renderComponent(source, {
+    label: "Workspace",
+    items: [
+      { label: "Dashboard", href: "/", value: "dash", icon: "icon-[lucide--gauge]" },
+      {
+        heading: "Projects",
+        items: [
+          { label: "Active", href: "/active", value: "active" },
+          {
+            label: "Archive",
+            value: "archive",
+            items: [{ label: "2025", href: "/a/2025", value: "a2025" }],
+          },
+        ],
+      },
+    ],
+    active: "active",
+  });
+  const dom = mountHtml(html);
+
+  expect(dom.querySelector(".wire-sidebar")).not.toBeNull();
+  // Every entry renders a heading node; only group entries fill it in, so
+  // match on content rather than first-in-document.
+  const headings = [...dom.querySelectorAll(".wire-sidebar__heading")]
+    .map((node) => node.textContent!.trim())
+    .filter(Boolean);
+  expect(headings).toContain("Projects");
+  expect(dom.querySelector('[aria-current="page"]')!.textContent).toContain("Active");
+  expect(dom.querySelector(".wire-sidebar__icon")).not.toBeNull();
+  // Third level exists and is reachable.
+  const deep = [...dom.querySelectorAll(".wire-sidebar__sublist--level3")]
+    .map((n) => n.textContent!.trim())
+    .filter(Boolean);
+  expect(deep.join(" ")).toContain("2025");
+  expect(dom.querySelector('[data-wrn-roving="vertical"]')).not.toBeNull();
+});
+
+test("sidebar composes Drawer for its off-canvas presentation", async () => {
+  const source = readFileSync(uiComponentPath("Sidebar"), "utf8");
+  // Reusing Drawer means the focus trap and scroll lock come for free rather
+  // than being reimplemented here.
+  expect(source).toContain('import Drawer from "./Drawer.wrn"');
+  expect(source).toContain("<Drawer");
+});