Merge branch 'worktree-agent-a9537eabbf38e0608'

# Conflicts:
#	resources/views/components/scheme-picker.blade.php
#	resources/views/components/theme-script.blade.php
#	resources/views/showcase/sections/colour.blade.php
#	tests/Feature/Components/ThemeScriptTest.php

tests/Feature/Components/AppBarTest.php

@@ -69,6 +69,19 @@ it('draws floating and docked toolbars', function () {
         ->not->toContain('data-toolbar-group');
 });
 
+it('offers M3\'s three contrast levels, marking the one in force', function () {
+    expect((string) $this->blade('<x-theme-toggle mode="contrast" />'))
+        ->toContain('data-theme-toggle="contrast"')
+        ->toContain('role="radiogroup"')
+        ->toContain('aria-label="Contrast"')
+        ->toContain('data-contrast-option="standard"')
+        ->toContain('data-contrast-option="medium"')
+        ->toContain('data-contrast-option="high"')
+        ->toContain("\$store.theme.setContrast('high')")
+        // The row follows the resolved level, so the operating system's shows under `system`.
+        ->toContain("(\$store.theme.resolvedContrast === 'medium').toString()");
+});
+
 it('switches the theme through the store in three shapes', function () {
     expect((string) $this->blade('<x-theme-toggle />'))
         ->toContain('data-theme-toggle="toggle"')

tests/Feature/Components/SchemePickerTest.php

@@ -35,11 +35,37 @@ 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 x-data data-scheme-picker class="min-w-0 mt-4" data-test="color-profile">/')
+    expect($html)->toMatch('/<fieldset\s+x-data="\{ swatches: [^"]+\}"\s+data-scheme-picker\s+class="min-w-0 mt-4" data-test="color-profile"\s*>/')
         ->and(substr_count($html, 'wire:model="colorProfile"'))->toBe(2)
         ->and(substr_count($html, 'data-test="color-profile"'))->toBe(1);
 });
 
+it('swaps the dots to the contrast level on screen', function () {
+    File::put($this->path, json_encode([
+        'default' => 'indigo',
+        'profiles' => [
+            'indigo' => [
+                'label' => 'Indigo',
+                'light' => ['primary' => '#4f46e5', 'secondary' => '#5b5d72', 'tertiary' => '#77536d'],
+                'dark' => ['primary' => '#c0c1ff', 'secondary' => '#c4c5dd', 'tertiary' => '#e6bad7'],
+                'contrast' => ['high' => ['light' => ['primary' => '#241bb0'], 'dark' => ['primary' => '#eeeaff']]],
+            ],
+        ],
+    ]));
+
+    $html = (string) $this->blade('<x-scheme-picker wire:model="colorProfile" />');
+
+    expect($html)
+        // Standard is the inline pair, so a dot is painted before Alpine runs.
+        ->toContain('style="--swatch-light: #4f46e5; --swatch-dark: #c0c1ff"')
+        ->toContain('\u0022standard\u0022:{\u0022light\u0022:{\u0022primary\u0022:\u0022#4f46e5\u0022')
+        ->toContain('\u0022high\u0022:{\u0022light\u0022:{\u0022primary\u0022:\u0022#241bb0\u0022')
+        // A level the file does not carry repeats the standard colours rather than none.
+        ->toContain('\u0022medium\u0022:{\u0022light\u0022:{\u0022primary\u0022:\u0022#4f46e5\u0022')
+        ->toContain('swatches[\'indigo\'][$store.theme.resolvedContrast].light[\'primary\']')
+        ->toContain('swatches[\'indigo\'][$store.theme.resolvedContrast].dark[\'tertiary\']');
+});
+
 it('keeps its inline styles to the scheme file\'s checked colours', function () {
     File::put($this->path, json_encode([
         'default' => 'indigo',
@@ -48,10 +74,12 @@ 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('/style="([^"]*)"/', $html, $styles);
+    preg_match_all('/\sstyle="([^"]*)"/', $html, $styles);
 
     expect($styles[1])->not->toBeEmpty()
-        ->each->toMatch('/^--swatch-light: #[0-9a-fA-F]{6}; --swatch-dark: #[0-9a-fA-F]{6}$/');
+        ->each->toMatch('/^--swatch-light: #[0-9a-fA-F]{6}; --swatch-dark: #[0-9a-fA-F]{6}$/')
+        // The colours Alpine swaps in are the same filtered ones, never the file's own text.
+        ->and($html)->not->toContain('url(');
 });
 
 it('shows a validation message for the bound property instead of the hint', function () {

tests/Feature/Components/ThemeScriptTest.php

@@ -5,7 +5,36 @@ use NoNameWeb\LivewireMaterial\Support\Scheme;
 
 it('follows the operating system until the visitor chooses, by default', function () {
     $this->blade('<x-theme-script />')
-        ->assertSee('({"scheme":null,"default":"system","key":"material-theme","legacy":[],"rail":{"default":"expanded","key":"material-rail"}})', false);
+        ->assertSee('({"scheme":null,"default":"system","key":"material-theme","legacy":[],"contrast":{"default":"system","key":"material-contrast"},"motion":null,"rail":{"default":"expanded","key":"material-rail"}})', false);
+});
+
+it('resolves the contrast level before the first paint, and leaves standard unwritten', function () {
+    config(['livewire-material.theme.contrast' => ['default' => 'high', 'storage_key' => 'sealshare-contrast']]);
+
+    $this->blade('<x-theme-script />')
+        ->assertSee('"contrast":{"default":"high","key":"sealshare-contrast"}', false)
+        ->assertSee("window.matchMedia('(prefers-contrast: more)')", false)
+        ->assertSee("var level = current === 'system' ? (contrastMedia.matches ? 'high' : 'standard') : current;", false)
+        ->assertSee("root.setAttribute('data-contrast', level);", false)
+        ->assertSee("root.removeAttribute('data-contrast');", false)
+        ->assertSee("root.setAttribute('data-contrast-choice', contrast);", false)
+        ->assertSee("contrastMedia.addEventListener('change', applyContrast);", false);
+
+    config(['livewire-material.theme.contrast.default' => 'extreme']);
+
+    $this->blade('<x-theme-script />')->assertSee('"contrast":{"default":"system"', false);
+});
+
+it('writes the standard motion scheme to <html>, and nothing for the expressive one', function () {
+    $this->blade('<x-theme-script />')
+        ->assertSee('"motion":null', false)
+        ->assertDontSee("root.setAttribute('data-motion', 'standard')", false);
+
+    config(['livewire-material.motion.scheme' => 'standard']);
+
+    $this->blade('<x-theme-script />')
+        ->assertSee('"motion":"standard"', false)
+        ->assertSee("root.setAttribute('data-motion', settings.motion);", false);
 });
 
 it('takes the application\'s default, key and legacy keys', function () {
@@ -42,7 +71,7 @@ it('starts a collapsible rail as the application says, expanded otherwise', func
 it('puts its attributes back on <html> when wire:navigate swaps the page', function () {
     $this->blade('<x-theme-script />')
         ->assertSee("document.addEventListener('livewire:navigating'", false)
-        ->assertSee("['data-scheme', 'data-theme', 'data-theme-choice', 'data-theme-key', 'data-rail', 'data-rail-auto', 'data-rail-key']", false)
+        ->assertSee("['data-scheme', 'data-theme', 'data-theme-choice', 'data-theme-key', 'data-contrast', 'data-contrast-choice', 'data-contrast-key', 'data-motion', 'data-rail', 'data-rail-auto', 'data-rail-key']", false)
         ->assertSee('event.detail.onSwap(', false);
 });
 
@@ -79,29 +108,50 @@ it('paints the theme-color meta in the resolved theme\'s surface when asked', fu
     config(['livewire-material.theme.meta' => true]);
 
     $scheme = Scheme::load();
+    $surfaces = fn (string $level): string => sprintf(
+        '{"light":"%s","dark":"%s"}',
+        Scheme::load(contrast: $level)['light']['surface'],
+        Scheme::load(contrast: $level)['dark']['surface'],
+    );
 
     $this->blade('<x-theme-script />')
-        ->assertSee('"meta":{"light":"'.$scheme['light']['surface'].'","dark":"'.$scheme['dark']['surface'].'","profiles":{}}', false)
+        ->assertSee('"meta":{"light":"'.$scheme['light']['surface'].'","dark":"'.$scheme['dark']['surface'].'","contrast":{"medium":'.$surfaces('medium').',"high":'.$surfaces('high').'},"profiles":{}}', false)
         ->assertSee('document.head.querySelectorAll(\'meta[name="theme-color"]:not([media])\')', false)
-        ->assertSee("new MutationObserver(paintThemeColor).observe(root, { attributes: true, attributeFilter: ['data-theme', 'data-scheme'] });", false)
+        ->assertSee("new MutationObserver(paintThemeColor).observe(root, { attributes: true, attributeFilter: ['data-theme', 'data-scheme', 'data-contrast'] });", false)
         ->assertSee("document.addEventListener('livewire:navigated', paintThemeColor);", false);
+
+    // The profile on <html> picks the set of surfaces, the level in data-contrast the pair.
+    // (M3 moves the ink rather than the page, so a scheme's surface may read the same at every
+    // level; the meta still takes the level's own, whatever the generator made of it.)
+    expect((string) $this->blade('<x-theme-script />'))
+        ->toContain('var surfaces = Object.prototype.hasOwnProperty.call(settings.meta.profiles, scheme) ? settings.meta.profiles[scheme] : settings.meta;')
+        ->toContain('var colour = (Object.prototype.hasOwnProperty.call(surfaces.contrast, level) ? surfaces.contrast[level] : surfaces)[theme];');
 });
 
-it('gives the theme-color meta every profile\'s surfaces, the active one\'s first', function () {
+it('gives the theme-color meta every profile\'s surfaces, at every contrast level', function () {
     $path = sys_get_temp_dir().'/theme-script-meta-'.uniqid().'.json';
     File::put($path, json_encode([
         'default' => 'indigo',
         'profiles' => [
-            'indigo' => ['label' => 'Indigo', 'light' => ['surface' => '#fbf8ff'], 'dark' => ['surface' => '#12131a']],
+            'indigo' => [
+                'label' => 'Indigo',
+                'light' => ['surface' => '#fbf8ff'],
+                'dark' => ['surface' => '#12131a'],
+                'contrast' => ['high' => ['light' => ['surface' => '#ffffff'], 'dark' => ['surface' => '#000000']]],
+            ],
             'teal' => ['label' => 'Teal', 'light' => ['surface' => '#f4fbf8'], 'dark' => ['surface' => '#0e1513']],
         ],
     ]));
     config(['livewire-material.scheme' => $path, 'livewire-material.theme.meta' => true]);
-    Scheme::resolveProfileUsing(fn (): string => 'teal');
+    Scheme::resolveProfileUsing(fn (): string => 'indigo');
 
     try {
         $this->blade('<x-theme-script />')
-            ->assertSee('"meta":{"light":"#f4fbf8","dark":"#0e1513","profiles":{"indigo":{"light":"#fbf8ff","dark":"#12131a"},"teal":{"light":"#f4fbf8","dark":"#0e1513"}}}', false);
+            // The active profile first, then every profile, each with the levels it generated;
+            // a profile without a level keeps its standard surfaces there.
+            ->assertSee('"meta":{"light":"#fbf8ff","dark":"#12131a","contrast":{"medium":{"light":"#fbf8ff","dark":"#12131a"},"high":{"light":"#ffffff","dark":"#000000"}},"profiles":{', false)
+            ->assertSee('"indigo":{"light":"#fbf8ff","dark":"#12131a","contrast":{"medium":{"light":"#fbf8ff","dark":"#12131a"},"high":{"light":"#ffffff","dark":"#000000"}}}', false)
+            ->assertSee('"teal":{"light":"#f4fbf8","dark":"#0e1513","contrast":{"medium":{"light":"#f4fbf8","dark":"#0e1513"},"high":{"light":"#f4fbf8","dark":"#0e1513"}}}', false);
     } finally {
         Scheme::resolveProfileUsing(null);
         File::delete($path);