Draw the text field's chrome without Tailwind

<x-field> renders data-md-field with its props and parts as data-md-*
attributes (box, control, label, outline, support, counter, trailing
buttons), and field.css moves into material.components on tokens: px
geometry, spacing and state tokens, the 600px breakpoint (plan step 36).
Its icons take a size prop, 24/20/16 by the field's size.

Every control the field wraps now marks itself data-md-field-control,
so the inputs, the pickers, choices, field.js, menu.css's select and
listbox rules and timepicker.css follow the renamed hooks. Browser tests
cover the error icon, the disabled field's hover, the counter and the
width bound from 600px.

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

resources/js/field.js

@@ -13,7 +13,7 @@
  * mark. A person pressing the box clears the property as the browser always does; the mark stays
  * until the server decides again.
  */
-const GROWING = 'textarea[data-autogrow]'
+const GROWING = 'textarea[data-md-autogrow]'
 const MIXED = 'input[type="checkbox"][data-indeterminate]'
 
 const growsByItself = window.CSS?.supports?.('field-sizing', 'content') ?? false
@@ -76,7 +76,7 @@ new MutationObserver((records) => {
     subtree: true,
     childList: true,
     attributes: true,
-    attributeFilter: ['data-indeterminate', 'data-autogrow'],
+    attributeFilter: ['data-indeterminate', 'data-md-autogrow'],
 })
 
 markAll(document)