chore(ui): wire color and size into the new navigation components

Every bundled component must expose color and size; the rewrites dropped
them, which the library-wide invariant test caught. Rather than re-adding
them as dead props, each component now maps color onto an accent variable
that its active, current and focus affordances actually use, and size onto
the root font scale.

Regenerates the component reference, showcase and visual contract.

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

packages/csr/test/reactive.test.ts

@@ -895,6 +895,17 @@ test("comments are ignored inside interpreted statements", () => {
   expect(win.document.querySelector("#out")?.textContent).toBe("2");
 });
 
+/*
+ * happy-dom builds its own KeyboardEvent, which is structurally distinct from
+ * the DOM lib Event that dispatchEvent is typed against. Same cast the window
+ * dispatches above use, kept in one place.
+ */
+function keydown(win: Window, key: string): Event {
+  const ctor = (win as unknown as { KeyboardEvent: new (type: string, init: unknown) => unknown })
+    .KeyboardEvent;
+  return new ctor("keydown", { key, bubbles: true }) as unknown as Event;
+}
+
 test("roving focus moves with arrow keys and wraps", () => {
   const win = mount(
     `<div data-wrn-roving="horizontal">
@@ -911,20 +922,18 @@ test("roving focus moves with arrow keys and wraps", () => {
   expect(doc.querySelector("#b")!.getAttribute("tabindex")).toBe("-1");
 
   a.focus();
-  a.dispatchEvent(new win.KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true }));
+  a.dispatchEvent(keydown(win, "ArrowRight"));
   expect(doc.activeElement!.id).toBe("b");
   expect(doc.querySelector("#b")!.getAttribute("tabindex")).toBe("0");
   expect(a.getAttribute("tabindex")).toBe("-1");
 
-  doc
-    .querySelector("#b")!
-    .dispatchEvent(new win.KeyboardEvent("keydown", { key: "ArrowLeft", bubbles: true }));
+  (doc.querySelector("#b") as unknown as HTMLElement).dispatchEvent(keydown(win, "ArrowLeft"));
   expect(doc.activeElement!.id).toBe("a");
 
-  a.dispatchEvent(new win.KeyboardEvent("keydown", { key: "ArrowLeft", bubbles: true }));
+  a.dispatchEvent(keydown(win, "ArrowLeft"));
   expect(doc.activeElement!.id).toBe("c");
 
-  c.dispatchEvent(new win.KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true }));
+  c.dispatchEvent(keydown(win, "ArrowRight"));
   expect(doc.activeElement!.id).toBe("a");
 });
 
@@ -940,15 +949,13 @@ test("roving focus honours Home and End and skips disabled items", () => {
   const a = doc.querySelector("#a") as unknown as HTMLElement;
   a.focus();
 
-  a.dispatchEvent(new win.KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }));
+  a.dispatchEvent(keydown(win, "ArrowDown"));
   expect(doc.activeElement!.id).toBe("c");
 
-  doc
-    .querySelector("#c")!
-    .dispatchEvent(new win.KeyboardEvent("keydown", { key: "Home", bubbles: true }));
+  (doc.querySelector("#c") as unknown as HTMLElement).dispatchEvent(keydown(win, "Home"));
   expect(doc.activeElement!.id).toBe("a");
 
-  a.dispatchEvent(new win.KeyboardEvent("keydown", { key: "End", bubbles: true }));
+  a.dispatchEvent(keydown(win, "End"));
   expect(doc.activeElement!.id).toBe("c");
 });
 
@@ -961,7 +968,7 @@ test("horizontal roving ignores vertical arrows so the page still scrolls", () =
   );
   const a = win.document.querySelector("#a") as unknown as HTMLElement;
   a.focus();
-  a.dispatchEvent(new win.KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }));
+  a.dispatchEvent(keydown(win, "ArrowDown"));
   expect(win.document.activeElement!.id).toBe("a");
 });
 
@@ -990,7 +997,7 @@ test("nested roving groups do not capture the outer group items", () => {
   const doc = win.document;
   const a = doc.querySelector("#a") as unknown as HTMLElement;
   a.focus();
-  a.dispatchEvent(new win.KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true }));
+  a.dispatchEvent(keydown(win, "ArrowRight"));
   expect(doc.activeElement!.id).toBe("b");
 });
 
@@ -1009,7 +1016,7 @@ test("opening a modal dialog traps Tab inside it", () => {
   const doc = win.document;
   const last = doc.querySelector("#last") as unknown as HTMLElement;
   last.focus();
-  last.dispatchEvent(new win.KeyboardEvent("keydown", { key: "Tab", bubbles: true }));
+  last.dispatchEvent(keydown(win, "Tab"));
   expect(doc.activeElement!.id).toBe("first");
 });
 
@@ -1027,7 +1034,7 @@ test("a hidden dialog does not trap Tab", () => {
   const doc = win.document;
   const outside = doc.querySelector("#outside") as unknown as HTMLElement;
   outside.focus();
-  outside.dispatchEvent(new win.KeyboardEvent("keydown", { key: "Tab", bubbles: true }));
+  outside.dispatchEvent(keydown(win, "Tab"));
   expect(doc.activeElement!.id).toBe("outside");
 });
 
@@ -1042,6 +1049,6 @@ test("an empty or false roving attribute opts the group out entirely", () => {
   const a = doc.querySelector("#a") as unknown as HTMLElement;
   expect(a.getAttribute("tabindex")).toBeNull();
   a.focus();
-  a.dispatchEvent(new win.KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true }));
+  a.dispatchEvent(keydown(win, "ArrowRight"));
   expect(doc.activeElement!.id).toBe("a");
 });