Draw the switch without Tailwind

<x-toggle> renders data-md-toggle, its row (data-md-right), track,
handle and icons as data-md-* attributes; the handle's icons take size
16 and a label-less track md-touch-target (plan step 36). toggle.css
gains the root; a browser test pins the handle's 16px/24px sizes and
16px/36px centres off and on.

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

tests/Browser/FieldsTest.php

@@ -312,3 +312,14 @@ it('lets a selection control without a label be pressed at the edge of its 48px
         ->assertScript($pressAtEdge('#bare-switch', '0', '22'))
         ->assertScript($pressAtEdge('input[name=\"bare-radio\"]', '0', '-22'));
 });
+
+it('draws the switch\'s handle at SwitchTokens\' sizes and centres, off and on', function () {
+    $handle = "(() => { const track = document.querySelector('[data-md-switch]:has(#public)').getBoundingClientRect(); const handle = document.querySelector('[data-md-switch]:has(#public) [data-md-switch-handle]').getBoundingClientRect(); return [track.width, track.height, handle.width, Math.round(handle.left + handle.width / 2 - track.left), Math.round(handle.top + handle.height / 2 - track.top)].join(); })()";
+
+    $page = fieldProbe()->assertScript("{$handle} === '52,32,16,16,16'");
+
+    $page->keys('#public', 'Space')
+        ->assertSeeIn('#public-state', 'true')
+        ->wait(0.7)
+        ->assertScript("{$handle} === '52,32,24,36,16'");
+});