Add M3 text fields, selects and selection controls

Outlined and filled text fields (input, password, auto-growing textarea,
native select with the customizable select menu, file), checkbox with an
indeterminate state, radio buttons, the M3 switch and form, ported from
ReStride and extended. The first half of Phase 6.

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

resources/views/components/toggle.blade.php

@@ -0,0 +1,56 @@
+{{-- A switch, M3's: a 52×32 track whose handle grows and slides across when it turns on.
+
+     On a real checkbox with `role="switch"`, so it is focusable, announced as on or off, and takes
+     Space from the keyboard; the handle is drawn beside it. `label` and `hint` sit beside it and are
+     its name — a switch without `label` needs an `aria-label`. `right` puts it at the end of the
+     row, where a setting's switch usually is. `icons` draws a check on the handle when on and a
+     cross when off; `icons="selected"` only the check. Every other attribute reaches the `<input>`
+     (resources/css/components/selection.css). --}}
+
+@props([
+    'label' => null,
+    'hint' => null,
+    'right' => false,
+    'icons' => false,
+])
+
+@php
+    $model = $attributes->whereStartsWith('wire:model')->first();
+    $id = $attributes->get('id') ?? 'switch-'.substr(md5($model.'|'.$label), 0, 12);
+    $icons = $icons === 'selected' ? 'selected' : ($icons ? 'both' : null);
+@endphp
+
+<div {{ $attributes->only(['class', 'wire:key'])->class(['min-w-0']) }}>
+    <label for="{{ $id }}" data-selection @class([
+        'flex gap-4',
+        'items-start' => filled($hint),
+        'items-center' => blank($hint),
+        'flex-row-reverse justify-between' => $right,
+    ])>
+        <span data-switch @if ($icons) data-icons="{{ $icons }}" @endif>
+            <input
+                {{ $attributes->except(['class', 'id', 'wire:key']) }}
+                id="{{ $id }}"
+                type="checkbox"
+                role="switch"
+            />
+            <span data-handle>
+                @if ($icons)
+                    <x-icon name="check" class="size-4" data-on />
+                    <x-icon name="close" class="size-4" data-off />
+                @endif
+            </span>
+        </span>
+
+        @if (filled($label) || filled($hint))
+            <span class="min-w-0">
+                @if (filled($label))
+                    <span class="block type-body-lg text-on-surface" data-selection-label>{{ $label }}</span>
+                @endif
+                @if (filled($hint))
+                    <span class="mt-0.5 block type-body-sm text-on-surface-variant">{{ $hint }}</span>
+                @endif
+            </span>
+        @endif
+    </label>
+</div>