Build the theme and contrast rows on the connected button group

`mode="picker"` hand-rolled an outlined segmented button, point for point the
design M3 Expressive deprecates, and its own arrow keys neither wrapped nor
handled Up/Down. Both rows are now <x-group>: native radios in a fieldset, so the
browser supplies the radiogroup, both axes, the wrap and the roving tab stop, and
the store is bound through an x-model accessor — a contrast row still marks the
resolved level but writes through setContrast(). A new `label` prop legends the
row. Plan: docs/plans/material-3-alignment.md, step 14 (navigation N-04, N-17).

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

tests/Browser/BarsTest.php

@@ -120,14 +120,14 @@ it('moves focus along a toolbar with the arrow keys', function () {
 
 it('switches the theme from a toggle, a cycle and a picker', function () {
     $page = barsProbe()
-        ->click('[data-theme-option="light"]')
+        ->click('label:has(input[name="material-theme"][value="light"])')
         ->assertScript("document.documentElement.dataset.theme === 'light'")
         ->assertAttribute('#toggle', 'aria-pressed', 'false');
 
     $page->click('#toggle')
         ->assertScript("document.documentElement.dataset.theme === 'dark'")
         ->assertAttribute('#toggle', 'aria-pressed', 'true')
-        ->assertAttribute('[data-theme-option="dark"]', 'aria-checked', 'true');
+        ->assertScript('document.querySelector(\'input[name="material-theme"][value="dark"]\').checked');
 
     $page->click('#cycle')
         ->assertScript("document.documentElement.dataset.themeChoice === 'system'")