Draw the scheme picker without Tailwind

Plan step 36 (navigation group, third batch, last component):
<x-scheme-picker>'s class lists move into resources/css/components/
scheme-picker.css, keyed on data-md-scheme-picker (its legend and
options grid, 2 columns below medium and 4 from it) and
data-md-scheme-picker-option, whose radio inside is read with :has()
for the chosen and the focus states — the input, not the label, is
the real control and carries the ring group.css's own segments keep
the same refinement for. `dark:bg-(--swatch-dark)` becomes
[data-theme='dark'] on the swatch (theme.css's own dark custom
variant reduces to a plain descendant selector here, since the
swatch never carries data-theme itself); the profile's name keeps its
label-large type as a text class on the view, since it is the
caller's own prose.

Hooks renamed: data-scheme-picker to data-md-scheme-picker,
data-scheme-option to data-md-scheme-picker-option, updated in
SchemePickerTest.php and tests/Browser/{ThemeTest,ColourProfilesTest}.php.

Browser tests added (docs/plans/material-3-browser-tests.md): the
contrast switch repaints at once and survives a wire:navigate, and
prefers-contrast: more picks high (Playwright's contrast context
option, the same shape as the existing reducedMotion tests).

This is the last navigation-group component off Tailwind. Every
package component is now drawn without Tailwind; tailwind.css keeps
only tokens/theme.css and tokens/utilities.css, which the showcase
still needs until step 38.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

tests/Feature/Components/SchemePickerTest.php

@@ -1,6 +1,7 @@
 <?php
 
 use Illuminate\Support\Facades\File;
+use NoNameWeb\LivewireMaterial\Tests\Support\ComponentStylesheet;
 
 beforeEach(function () {
     $this->path = sys_get_temp_dir().'/scheme-picker-'.uniqid().'.json';
@@ -22,10 +23,10 @@ it('draws a radio per generated profile, bound, named and previewing on change',
     $html = (string) $this->blade('<x-scheme-picker label="Colour profile" hint="Applies after saving" wire:model="colorProfile" />');
 
     expect($html)
-        ->toContain('<legend class="mb-2 type-label-lg text-on-surface-variant">Colour profile</legend>')
+        ->toContain('<legend data-md-scheme-picker-legend class="md-type-label-lg md-ink-variant">Colour profile</legend>')
         ->toContain('Applies after saving')
-        ->toContain('data-scheme-option="indigo"')
-        ->toContain('data-scheme-option="teal"')
+        ->toContain('data-md-scheme-picker-option="indigo"')
+        ->toContain('data-md-scheme-picker-option="teal"')
         ->toMatch('/<input\s+wire:model="colorProfile"\s+type="radio"\s+name="colorProfile"\s+value="teal"/')
         ->toContain('x-on:change="$store.theme.previewScheme($event.target.value)"')
         ->toContain('>Teal</span>')
@@ -35,11 +36,48 @@ it('draws a radio per generated profile, bound, named and previewing on change',
 it('puts its other attributes on the group and the binding on the radios', function () {
     $html = (string) $this->blade('<x-scheme-picker wire:model="colorProfile" data-test="color-profile" class="mt-4" />');
 
-    expect($html)->toMatch('/<fieldset\s+x-data="\{ swatches: [^"]+\}"\s+data-scheme-picker\s+class="min-w-0 mt-4" data-test="color-profile"\s*>/')
+    expect($html)->toMatch('/<fieldset\s+x-data="\{ swatches: [^"]+\}"\s+data-md-scheme-picker\s+data-test="color-profile" class="mt-4"\s*>/')
         ->and(substr_count($html, 'wire:model="colorProfile"'))->toBe(2)
         ->and(substr_count($html, 'data-test="color-profile"'))->toBe(1);
 });
 
+it('lays the swatch cards out 2 up below medium and 4 up from it', function () {
+    $css = ComponentStylesheet::read('scheme-picker');
+
+    expect($css->declarations('[data-md-scheme-picker-options]'))
+        ->toBe([
+            'display' => 'grid',
+            'grid-template-columns' => 'repeat(2, 1fr)',
+            'gap' => 'var(--md-sys-measurement-space100)',
+        ])
+        ->and($css->declarations('[data-md-scheme-picker-options]', ['@media (width >= 600px)']))
+        ->toBe(['grid-template-columns' => 'repeat(4, 1fr)']);
+});
+
+it('marks the chosen card through the radio inside, read with :has()', function () {
+    $css = ComponentStylesheet::read('scheme-picker');
+
+    expect($css->declarations('[data-md-scheme-picker-option]:has(:checked)'))
+        ->toBe([
+            'border-color' => 'transparent',
+            'background-color' => 'var(--md-sys-color-secondary-container)',
+            'color' => 'var(--md-sys-color-on-secondary-container)',
+        ])
+        ->and($css->declarations('[data-md-scheme-picker-option]:has(:checked) [data-md-scheme-picker-swatch]'))
+        ->toBe(['box-shadow' => '0 0 0 2px var(--md-sys-color-secondary-container)'])
+        ->and($css->declarations('[data-md-scheme-picker-option]:has(:checked) [data-md-scheme-picker-check]'))
+        ->toBe(['display' => 'block']);
+});
+
+it('swaps a swatch to its dark colour under [data-theme=dark], never by class', function () {
+    $css = ComponentStylesheet::read('scheme-picker');
+
+    expect($css->declarations('[data-md-scheme-picker-swatch]'))
+        ->toHaveKey('background-color', 'var(--swatch-light)')
+        ->and($css->declarations("[data-theme='dark'] [data-md-scheme-picker-swatch]"))
+        ->toBe(['background-color' => 'var(--swatch-dark)']);
+});
+
 it('swaps the dots to the contrast level on screen', function () {
     File::put($this->path, json_encode([
         'default' => 'indigo',
@@ -74,7 +112,9 @@ it('keeps its inline styles to the scheme file\'s checked colours', function ()
 
     $html = (string) $this->blade('<x-scheme-picker wire:model="colorProfile" />');
 
-    preg_match_all('/\sstyle="([^"]*)"/', $html, $styles);
+    // Only the swatches' own style: the check icon's --md-icon-size is a size prop, not a colour
+    // the scheme file supplied.
+    preg_match_all('/data-md-scheme-picker-swatch\s+style="([^"]*)"/', $html, $styles);
 
     expect($styles[1])->not->toBeEmpty()
         ->each->toMatch('/^--swatch-light: #[0-9a-fA-F]{6}; --swatch-dark: #[0-9a-fA-F]{6}$/')