Offer the contrast level where the theme is chosen

<x-theme-toggle mode="contrast"> is the picker's row for M3's three levels, marking
the one in force so the operating system's setting shows while the choice is system.
The scheme picker's dots follow the level on screen instead of always promising the
standard colours, and the showcase's colour section puts the three levels side by
side — data-scheme beside data-contrast, the way a profile's level blocks key.
Plan: docs/plans/material-3-alignment.md, step 7 (core C2).

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

resources/views/components/theme-toggle.blade.php

@@ -7,6 +7,10 @@
        "Dark theme", pressed while dark.
      - `cycle`: an icon button that steps light → dark → system, showing the choice it is on.
      - `picker`: M3's segmented buttons for the three choices, for a settings page.
+     - `contrast`: the same row for M3's three contrast levels — standard, medium (3:1) and high
+       (7:1), the three the scheme is generated in. The row marks the level in force
+       (`resolvedContrast`), so the operating system's setting shows while the choice is
+       `system`, and choosing one is an explicit choice from then on.
 
      The theme is the visitor's, known only in the browser, so the parts that depend on it wait for
      Alpine (`x-cloak`) rather than render a guess. `class` lands on the button or the group. --}}
@@ -16,10 +20,37 @@
 ])
 
 @php
-    $mode = in_array($mode, ['toggle', 'cycle', 'picker'], true) ? $mode : 'toggle';
+    $mode = in_array($mode, ['toggle', 'cycle', 'picker', 'contrast'], true) ? $mode : 'toggle';
 @endphp
 
-@if ($mode === 'picker')
+@if ($mode === 'contrast')
+    <div
+        role="radiogroup"
+        aria-label="{{ __('Contrast') }}"
+        x-data
+        data-theme-toggle="contrast"
+        {{ $attributes->class(['inline-flex h-10 rounded-corner-full border border-outline']) }}
+    >
+        @foreach (['standard' => ['Standard', 'contrast'], 'medium' => ['Medium', 'contrast_circle'], 'high' => ['High', 'contrast_square']] as $level => [$text, $icon])
+            <button
+                type="button"
+                role="radio"
+                aria-checked="false"
+                x-bind:aria-checked="($store.theme.resolvedContrast === '{{ $level }}').toString()"
+                x-bind:tabindex="$store.theme.resolvedContrast === '{{ $level }}' ? 0 : -1"
+                x-on:click="$store.theme.setContrast('{{ $level }}')"
+                x-on:keydown.arrow-right.prevent="$el.nextElementSibling?.click(); $el.nextElementSibling?.focus();"
+                x-on:keydown.arrow-left.prevent="$el.previousElementSibling?.click(); $el.previousElementSibling?.focus();"
+                data-contrast-option="{{ $level }}"
+                class="state-layer focus-ring inline-flex min-w-0 flex-1 cursor-pointer items-center justify-center gap-2 border-outline px-3 type-label-lg text-on-surface not-first:border-s first:rounded-s-corner-full last:rounded-e-corner-full aria-checked:bg-secondary-container aria-checked:text-on-secondary-container"
+            >
+                <x-livewire-material::icon name="check" class="hidden size-4.5 in-aria-checked:block" />
+                <x-livewire-material::icon :name="$icon" class="size-4.5 in-aria-checked:hidden" />
+                {{ __($text) }}
+            </button>
+        @endforeach
+    </div>
+@elseif ($mode === 'picker')
     <div
         role="radiogroup"
         aria-label="{{ __('Theme') }}"