Draw the checkbox and the selection controls' row without Tailwind

<x-checkbox> renders data-md-checkbox, its box, tick and dash, and its
row, text and errors as data-md-* attributes; the 18px tick takes a size
prop and a label-less box md-touch-target (plan step 36). selection.css
moves into material.components as the row, text and state layer the
three controls share, and each control's drawing goes to its own file:
checkbox.css, radio.css, toggle.css, on the state tokens. The radio and
the switch take the renamed shared hooks now and lose their layout
classes in their own commits. field.js follows data-md-indeterminate.

Renaming the switch's data-handle also stops selection.css matching the
slider's handles, which it drew 24px above the track.

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

resources/views/components/radio.blade.php

@@ -7,7 +7,7 @@
      (600px, M3's compact/medium boundary — compact always stacks), and
      `value` for the option chosen when the page loads (with `wire:model`, Livewire sets it).
      Errors are read from the bag under the `wire:model` name
-     (resources/css/components/selection.css).
+     (resources/css/components/radio.css).
 
      M3 stacks radio buttons vertically and cautions against a row at any width, so `inline` is for
      a group of two or three short labels that would waste a column, not the shape to reach for.
@@ -46,12 +46,12 @@
         @foreach ($options as $option)
             @php($optionHintText = data_get($option, $optionHint))
 
-            <label data-selection @if ($messages !== []) data-invalid @endif @class([
+            <label data-md-selection-row @if ($messages !== []) data-md-invalid @endif @class([
                 'flex gap-4',
                 'items-start' => filled($optionHintText),
                 'items-center' => blank($optionHintText),
             ])>
-                <span data-radio @class([
+                <span data-md-radio-button @class([
                     'mt-0.5' => filled($optionHintText),
                     'touch-target' => blank(data_get($option, $optionLabel)) && blank($optionHintText),
                 ])>
@@ -64,11 +64,11 @@
                         @checked($value !== null && (string) $value === (string) data_get($option, $optionValue))
                         @if ($messages !== []) aria-invalid="true" @endif
                     />
-                    <span data-dot></span>
+                    <span data-md-radio-dot></span>
                 </span>
 
                 <span class="min-w-0">
-                    <span class="block type-body-lg text-on-surface" data-selection-label>{{ data_get($option, $optionLabel) }}</span>
+                    <span class="block type-body-lg text-on-surface" data-md-selection-label>{{ data_get($option, $optionLabel) }}</span>
                     @if (filled($optionHintText))
                         <span class="mt-0.5 block type-body-sm text-on-surface-variant">{{ $optionHintText }}</span>
                     @endif