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

resources/css/components/toggle.css

@@ -11,8 +11,10 @@
  * state layer is a 40px circle around the handle. Its icons are 16px, on-primary-container when on.
  * Disabled, the track is on-surface at 12% and the handle on-surface at 38% (surface when on).
  *
- *   [data-md-switch]            the track; `data-md-icons` = "both" or "selected"
- *     input, [data-md-switch-handle] (with [data-md-switch-on] and [data-md-switch-off] icons)
+ *   [data-md-toggle]                the root; `class` and `style` land here
+ *     [data-md-selection-row]       data-md-right puts the switch at the end of the row
+ *       [data-md-switch]            the track; `data-md-icons` = "both" or "selected"
+ *         input, [data-md-switch-handle] (with [data-md-switch-on] and [data-md-switch-off] icons)
  */
 
 @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@@ -21,6 +23,10 @@
 @import './icon.css';
 
 @layer material.components {
+    [data-md-toggle] {
+        min-width: 0;
+    }
+
     /* The positions below are the handle's centres less half its size, measured inside the track's
        2px outline. */
     [data-md-switch] {