feat(ui): expand mega menu layout system

packages/ui/test/ui.test.ts

@@ -2938,6 +2938,44 @@ test("mega menu columns take roving focus and survive an empty column list", asy
   expect(dom.querySelector('[data-wrn-roving="both"]')).not.toBeNull();
 });
 
+test("mega menu supports rails, icons, badges, media, featured content and footer actions", async () => {
+  const source = readFileSync(uiComponentPath("MegaMenu"), "utf8");
+  const html = await renderComponent(source, {
+    label: "Explore",
+    variant: "icon-grid",
+    panelWidth: "2xl",
+    columnCount: 3,
+    rail: [{ label: "Enterprise", description: "For larger teams", icon: "icon-enterprise" }],
+    columns: [
+      {
+        heading: "Products",
+        description: "Choose a workspace",
+        image: "/products.png",
+        items: [
+          { label: "CRM", description: "Customer records", icon: "icon-crm", badge: "New" },
+        ],
+        actionLabel: "All products",
+      },
+    ],
+    featured: {
+      eyebrow: "What's new",
+      title: "Release notes",
+      image: "/release.png",
+      actionLabel: "See more",
+    },
+    footer: "One connected platform",
+    actionLabel: "View everything",
+  });
+  const dom = mountHtml(html);
+
+  expect(dom.querySelector(".wrn-mega")?.getAttribute("data-variant")).toBe("icon-grid");
+  expect(dom.querySelector(".wrn-mega__rail-link")?.textContent).toContain("Enterprise");
+  expect(dom.querySelector(".wrn-mega__badge")?.textContent).toContain("New");
+  expect(dom.querySelector(".wrn-mega__column-image")).not.toBeNull();
+  expect(dom.querySelector(".wrn-mega__featured")?.textContent).toContain("Release notes");
+  expect(dom.querySelector(".wrn-mega__footer")?.textContent).toContain("View everything");
+});
+
 test("sidebar renders single items, labelled groups and nested levels", async () => {
   const source = readFileSync(uiComponentPath("Sidebar"), "utf8");
   const html = await renderComponent(source, {