fix(ui): refine responsive catalog navigation

packages/ui/test/ui-redesign-contract.test.ts

@@ -126,6 +126,42 @@ describe("@wrnexus/ui redesign component pack", () => {
     expect(source).not.toContain(".wrn-navbar__topbar:not(:empty)");
   });
 
+  test("Navbar exposes a brand slot while retaining the brand prop fallback", async () => {
+    const source = await readFile(join(componentsDir, "Navbar.wrn"), "utf8");
+
+    expect(source).toContain('<slot name="brand">');
+    expect(source).toContain("brand.logo || brand.icon || brand.label || brand.description");
+  });
+
+  test("Navbar renders slotted utilities before its built-in actions", async () => {
+    const source = await readFile(join(componentsDir, "Navbar.wrn"), "utf8");
+    const actionsStart = source.indexOf('<div class="wrn-navbar__actions">');
+    const slotIndex = source.indexOf('<slot name="actions" />', actionsStart);
+    const actionsLoop = source.indexOf("{#each actions as item}", actionsStart);
+
+    expect(slotIndex).toBeGreaterThan(actionsStart);
+    expect(slotIndex).toBeLessThan(actionsLoop);
+  });
+
+  test("Navbar passes structured MegaMenu props as expressions", async () => {
+    const source = await readFile(join(componentsDir, "Navbar.wrn"), "utf8");
+
+    expect(source).toContain("columns={megaColumns(item)}");
+    expect(source).toContain("rail={megaData(item).rail || []}");
+    expect(source).toContain("featured={megaData(item).featured || {}}");
+    expect(source).toContain("fullWidth={megaData(item).fullWidth || false}");
+    expect(source).not.toContain('columns="{megaColumns(item)}"');
+  });
+
+  test("Navbar replaces mega panels with direct links in collapsed navigation", async () => {
+    const source = await readFile(join(componentsDir, "Navbar.wrn"), "utf8");
+
+    expect(source).toContain("wrn-navbar__mobile-mega-link");
+    expect(source).toContain("item.href || megaData(item).actionHref");
+    expect(source).toContain('.wrn-navbar__mega { display: none; }');
+    expect(source).toContain('.wrn-navbar__mobile-mega-link { display: flex; }');
+  });
+
   test("Navbar supports in-flow floating and elevated menu panels", async () => {
     const source = await readFile(join(componentsDir, "Navbar.wrn"), "utf8");
     const ast = parse(source);

packages/ui/test/ui.test.ts

@@ -2928,6 +2928,8 @@ test("mega menu renders column groups in an anchored panel", async () => {
   const trigger = dom.querySelector(".wrn-mega__trigger") as HTMLElement;
   expect(trigger.getAttribute("aria-expanded")).toBe("false");
   expect(trigger.getAttribute("aria-haspopup")).toBe("true");
+  expect(trigger.getAttribute("aria-label")).toBe("Products");
+  expect(dom.querySelector(".wrn-mega__trigger-label")?.getAttribute("data-label")).toBe("Products");
 
   const panel = dom.querySelector(".wrn-mega__panel") as HTMLElement;
   expect(panel.getAttribute("data-wrn-anchored")).toBe("true");
@@ -2980,7 +2982,8 @@ test("catalog mega menu renders only the active rail category", async () => {
   expect(source).toContain("overflow-y: auto");
   expect(source).not.toContain("@mouseenter='chooseCategory(item, index)'");
   expect(dom.querySelector(".wrn-mega__column-header")?.textContent).toContain("Sales");
-  expect(dom.querySelectorAll(".wrn-mega__link-icon")).toHaveLength(0);
+  expect(dom.querySelectorAll(".wrn-mega__link-icon")).toHaveLength(1);
+  expect(dom.querySelector(".wrn-mega__link-icon--fallback svg")).not.toBeNull();
   expect(dom.querySelectorAll(".wrn-mega__link-description")).toHaveLength(0);
   expect(source).toContain("border-bottom: 1px solid var(--wrn-color-border)");
   expect(source).toContain('.wrn-mega__rail-icon > span');