Bound a text field's width from medium

M3 § Text Fields, Behaviour: compact may let a field span full width, but
medium and expanded must bound it — "never let it span the full width of a
large screen". Nothing in the package capped a field (plan step 24, audit
docs/audits/m3-alignment/inputs.md § Missing). From `medium` a field now stops
at 40rem — the site names no number, so the header says where this one comes
from — which a `max-w-*` class beats and `full` takes off. The search bar
already carries M3's own 720px.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/views/components/field.blade.php

@@ -21,6 +21,10 @@
      "Character count, 5/20", M3's own label, from a polite region a second after typing stops rather
      than on every keystroke, which would talk over the typing.
 
+     From `medium` the field is no wider than 40rem, because M3 asks that a text field never span
+     the full width of a large screen (§ Text Fields, Behaviour); a `max-w-*` class from the call
+     site beats that, and `full` takes it off altogether.
+
      `class` from the call site lands on the outermost element, never the control, so a margin or
      a width is safe here. --}}
 
@@ -38,6 +42,7 @@
     'floated' => false,
     'mono' => false,
     'counter' => null,
+    'full' => false,
 ])
 
 @php
@@ -58,6 +63,7 @@
     @if ($messages !== []) data-invalid @endif
     @if ($floated) data-floated @endif
     @if ($mono) data-mono @endif
+    @if ($full) data-full @endif
 >
     <div class="field-box">
         @if ($icon)

resources/views/components/input.blade.php

@@ -5,7 +5,8 @@
      and `mono` for a field that holds code. `clearable` adds a trailing button that empties the
      field once it holds something; `copyable` one that copies its value and says so in a snackbar
      (a share link, a token). `counter` counts the characters used against `maxlength`, at the end of
-     the supporting-text row. Every other attribute reaches the `<input>`: `type`, `min`, `step`,
+     the supporting-text row; `full` lets the field span its pane past the 40rem M3 bounds it to
+     from `medium`. Every other attribute reaches the `<input>`: `type`, `min`, `step`,
      `readonly`, `wire:model` and the rest. Errors are read from the bag under the `wire:model` name.
 
      The placeholder is a single space when none is given, because the label can only tell an
@@ -23,6 +24,7 @@
     'clearable' => false,
     'copyable' => false,
     'counter' => false,
+    'full' => false,
     'size' => 'md',
     'variant' => null,
     'mono' => false,
@@ -39,7 +41,7 @@
     $max = $counter ? $attributes->get('maxlength') : null;
 @endphp
 
-<x-livewire-material::field :$id :$label :$hint :hint-class="$hintClass" :$messages :$icon :$prefix :$suffix :$size :$variant :$mono :counter="$max" :class="$attributes->get('class')" :data-readonly="$attributes->get('readonly') ? '' : null">
+<x-livewire-material::field :$id :$label :$hint :hint-class="$hintClass" :$messages :$icon :$prefix :$suffix :$size :$variant :$mono :counter="$max" :$full :class="$attributes->get('class')" :data-readonly="$attributes->get('readonly') ? '' : null">
     <input
         {{ $attributes->except(['class', 'id', 'placeholder'])->merge(['type' => 'text']) }}
         id="{{ $id }}"

resources/views/components/textarea.blade.php

@@ -3,8 +3,9 @@
      It starts at `rows` lines (3) and grows with what is typed up to `max-rows`, then scrolls;
      `:autogrow="false"` keeps it at `rows` and lets it be resized by hand, vertically only, so a
      form's column never moves. The label rests on the first line rather than in the middle of the
-     box. `label`, `hint`, `variant`, and `counter` for M3's character counter against `maxlength`;
-     every other attribute reaches the `<textarea>`. --}}
+     box. `label`, `hint`, `variant`, `counter` for M3's character counter against `maxlength`, and
+     `full` to span the pane past the 40rem M3 bounds a field to from `medium`; every other
+     attribute reaches the `<textarea>`. --}}
 
 @props([
     'label' => null,
@@ -15,6 +16,7 @@
     'maxRows' => null,
     'autogrow' => true,
     'counter' => false,
+    'full' => false,
 ])
 
 @php
@@ -28,7 +30,7 @@
     $max = $counter ? $attributes->get('maxlength') : null;
 @endphp
 
-<x-livewire-material::field :$id :$label :$hint :hint-class="$hintClass" :$messages :$variant :counter="$max" :class="$attributes->get('class')" :data-readonly="$attributes->get('readonly') ? '' : null">
+<x-livewire-material::field :$id :$label :$hint :hint-class="$hintClass" :$messages :$variant :counter="$max" :$full :class="$attributes->get('class')" :data-readonly="$attributes->get('readonly') ? '' : null">
     <textarea
         {{ $attributes->except(['class', 'id', 'placeholder']) }}
         id="{{ $id }}"

resources/views/showcase/sections/fields.blade.php

@@ -41,6 +41,14 @@
                 </div>
             </div>
             BLADE,
+        'Width at medium and above' => <<<'BLADE'
+            <div class="w-full space-y-4">
+                {{-- M3: never let a text field span the full width of a large screen. From medium it stops at 40rem. --}}
+                <x-input label="Bounded, the default" hint="No wider than 40rem from medium, however wide the pane is" />
+                <x-input label="Narrower" class="max-w-xs" hint="A max-w-* class from the call site wins" />
+                <x-input label="The width of the pane" full icon="search" hint="`full` takes the bound off — for a search row or an editor" />
+            </div>
+            BLADE,
         'Character counter' => <<<'BLADE'
             <div class="grid w-full gap-6 medium:grid-cols-2">
                 <div class="grid content-start gap-4">