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

This commit is contained in:

Andreas Reinhold / reini

2026-09-14 14:34:00 +02:00

co-authored by

Claude Opus 5

parent 3083fe28b2

commit f86afc0542

12 changed files with 510 additions and 365 deletions

									
										resources/css/components.css
									
		+3
		
												View File
												
				@@ -21,6 +21,9 @@

				@import './components/textarea.css';

				@import './components/select.css';

				@import './components/file.css';

				@import './components/checkbox.css';

				@import './components/radio.css';

				@import './components/toggle.css';

				/* Containment */