Draw the form without Tailwind

<x-form> renders data-md-form and data-md-form-actions, and its column
and actions row move to components/form.css in material.components, on
the spacing tokens (plan step 36). The actions slot's own attributes
still land on the row.

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

resources/views/components/form.blade.php

@@ -1,17 +1,15 @@
 {{-- A form: its fields in one column, and its actions at the foot.
 
-     `gap-4` between fields, because a text field floats its label half above its outline: any less
-     and the hint under one field runs into the label of the next. The `actions` slot takes a class
-     of its own; `separator` draws a divider above it.
-
-     `grid-cols-1`, because a bare `grid` has no columns and its implicit one floors at the
-     content's min-content: on a phone a wide field would push the form past its column. --}}
+     16px between fields, because a text field floats its label half above its outline: any less
+     and the hint under one field runs into the label of the next. The `actions` slot takes
+     attributes of its own (a `class` from the call site lands on the row untouched); `separator`
+     draws a divider above it. The column is resources/css/components/form.css. --}}
 
 @props([
     'separator' => false,
 ])
 
-<form {{ $attributes->class(['grid grid-cols-1 auto-rows-min gap-4']) }}>
+<form data-md-form {{ $attributes }}>
     {{ $slot }}
 
     @isset($actions)
@@ -19,7 +17,7 @@
             <x-livewire-material::divider />
         @endif
 
-        <div {{ $actions->attributes->class(['flex flex-wrap items-center justify-end gap-2']) }}>
+        <div data-md-form-actions {{ $actions->attributes }}>
             {{ $actions }}
         </div>
     @endisset