feat(ui): rewrite Tabs onto wire classes with URL sync and roving focus

Tabs was the only component in the library styled with Tailwind utilities, so
it could not be themed like the rest and assumed Tailwind was present. It also
fired raw CustomEvents instead of declaring outputs, and set a roving tabindex
with no keydown handler at all -- which left every inactive tab unreachable by
Tab while the arrows did nothing.

It now uses wire-* classes and a local style block, declares change and select
outputs, and opts into the roving runtime.

mode=url mirrors the selection into a query parameter via pushState. Back and
forward are handled in the runtime, which activates the matching tab rather
than assigning to component state: a popstate listener writing state would be
writing after the client function returned, and that write is dropped. The
round trip is marked so the component does not push a second history entry for
a navigation that came from history.

Also anchors Nav submenus so the viewport clamp can pull them back on screen.

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

packages/csr/src/reactive-runtime.ts

@@ -3198,6 +3198,46 @@ export const REACTIVE_RUNTIME = String.raw`
     syncRovingGroups();
   }
 
+  /*
+   * Back/forward support for tabs that mirror their selection into the URL.
+   *
+   * The runtime deliberately does not touch component state. A popstate
+   * listener that assigned to it would be writing after the client function
+   * returned, and that write is dropped. Instead it finds the tab matching the
+   * query parameter and activates it, so the component updates itself through
+   * its own handler.
+   *
+   * data-wrn-tabs-restoring marks the round trip, so the component knows not
+   * to push another history entry for a navigation that came from history.
+   */
+  function syncTabsFromUrl() {
+    var groups = document.querySelectorAll("[data-wrn-tabs-param]");
+    for (var index = 0; index < groups.length; index += 1) {
+      var group = groups[index];
+      var param = group.getAttribute("data-wrn-tabs-param");
+      if (!param) continue;
+      var value = new URLSearchParams(window.location.search).get(param);
+      if (value === null) continue;
+      var tab = group.querySelector('[role="tab"][data-value="' + value + '"]');
+      if (!tab || !tab.click) continue;
+      if (tab.getAttribute("aria-selected") === "true") continue;
+      group.setAttribute("data-wrn-tabs-restoring", "true");
+      try {
+        tab.click();
+      } finally {
+        group.removeAttribute("data-wrn-tabs-restoring");
+      }
+    }
+  }
+
+  function setupTabUrlSync() {
+    if (window.__wrnexusTabUrlBound) return;
+    window.__wrnexusTabUrlBound = true;
+    window.addEventListener("popstate", syncTabsFromUrl);
+    // Once after hydration, so a shared link opens on the right tab.
+    window.setTimeout(syncTabsFromUrl, 0);
+  }
+
   function hydrateScopes(root) {
     var host = root || document;
 
@@ -5416,6 +5456,7 @@ export const REACTIVE_RUNTIME = String.raw`
   setupAnchoredOverlays();
   setupModalDialogs();
   setupRovingFocus();
+  setupTabUrlSync();
   window.__wrnexusRepositionAnchored = repositionAnchored;
   window.__wrnexusHydrateScopes = hydrateScopes;
   window.__wrnexusInvalidateClientModule = function (url) { clientModuleCache.delete(url); };

packages/csr/test/reactive.test.ts

@@ -1052,3 +1052,37 @@ test("an empty or false roving attribute opts the group out entirely", () => {
   a.dispatchEvent(keydown(win, "ArrowRight"));
   expect(doc.activeElement!.id).toBe("a");
 });
+
+test("popstate activates the tab named by the query parameter without re-pushing", () => {
+  const win = mount(
+    `<section data-wrn-tabs-param="tab">
+       <div role="tablist">
+         <button role="tab" data-value="one" aria-selected="true" id="t1">One</button>
+         <button role="tab" data-value="two" aria-selected="false" id="t2">Two</button>
+       </div>
+     </section>`,
+  );
+  const doc = win.document;
+  let restoringAtClick: string | null = "not-clicked";
+  (doc.querySelector("#t2") as unknown as HTMLElement).addEventListener("click", () => {
+    restoringAtClick = doc
+      .querySelector("[data-wrn-tabs-param]")!
+      .getAttribute("data-wrn-tabs-restoring");
+  });
+
+  win.location.search = "?tab=two";
+  win.dispatchEvent(
+    new (win as unknown as { Event: new (t: string) => unknown }).Event(
+      "popstate",
+    ) as unknown as Parameters<Window["dispatchEvent"]>[0],
+  );
+
+  // The runtime activates the matching tab and marks the round trip, so the
+  // component can tell a history navigation from a real click and skip
+  // pushing another entry.
+  expect(restoringAtClick).toBe("true");
+  // The marker is cleaned up once the activation is done.
+  expect(
+    doc.querySelector("[data-wrn-tabs-param]")!.getAttribute("data-wrn-tabs-restoring"),
+  ).toBeNull();
+});