Give the one-line text field its own stylesheet entry

<x-input> marks its field root data-md-input, and components/input.css
brings what it renders, the field and its icons, so an application
imports one file per component (plan step 36).

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

resources/css/components.css

@@ -16,6 +16,7 @@
 /* Inputs, selection and data */
 @import './components/form.css';
 @import './components/field.css';
+@import './components/input.css';
 
 /* Containment */
 

resources/css/components/input.css

@@ -0,0 +1,13 @@
+/*
+ * <x-input>: M3's one-line text field (resources/views/components/input.blade.php).
+ *
+ * Nothing of its own to draw: the outlined and filled chrome, the floating label, the prefix and
+ * suffix, the clear and copy buttons and the character counter are the field's
+ * (components/field.css), and its icons are <x-icon>s. The field's root carries `data-md-input`
+ * for an application that wants to tell a one-line field from the others.
+ */
+
+@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
+
+@import './field.css';
+@import './icon.css';

resources/views/components/input.blade.php

@@ -11,7 +11,10 @@
 
      The placeholder is a single space when none is given, because the label can only tell an
      empty field from a filled one through `:placeholder-shown`. With a label, a real placeholder
-     shows only while the field has focus — until then the label stands where it would be. --}}
+     shows only while the field has focus — until then the label stands where it would be.
+
+     The field's root carries `data-md-input`; everything it draws is the field's chrome
+     (resources/css/components/field.css), which resources/css/components/input.css imports. --}}
 
 @props([
     'label' => null,
@@ -42,7 +45,7 @@
     $fieldIconSize = ['sm' => 20, 'xs' => 16][$size] ?? 24;
 @endphp
 
-<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-md-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-md-readonly="$attributes->get('readonly') ? '' : null" data-md-input>
     <input
         {{ $attributes->except(['class', 'id', 'placeholder'])->merge(['type' => 'text']) }}
         id="{{ $id }}"

tests/Feature/Components/FieldTest.php

@@ -5,6 +5,7 @@ it('draws an outlined field with a notched label unless told otherwise', functio
 
     expect($html)
         ->toContain('data-md-field')
+        ->toContain('data-md-input')
         ->toContain('data-md-variant="outlined"')
         ->toContain('<legend><span>Share name</span></legend>')
         ->toMatch('/<label for="(field-[0-9a-f]{12})" data-md-field-label>Share name<\/label>/')
@@ -65,7 +66,7 @@ it('puts icons, affixes and the size on the field, and every other attribute on
     $html = (string) $this->blade('<x-input label="Price" icon="payments" icon-right="info" prefix="CHF" suffix="per month" size="sm" type="number" min="0" class="w-40" mono readonly />');
 
     expect($html)
-        ->toMatch('/<div\s+data-md-field\s+data-md-variant="outlined"\s+data-md-size="sm"\s+data-md-mono\s+class="w-40" data-md-readonly=""\s*>/')
+        ->toMatch('/<div\s+data-md-field\s+data-md-variant="outlined"\s+data-md-size="sm"\s+data-md-mono\s+class="w-40" data-md-readonly="" data-md-input="data-md-input"\s*>/')
         ->toContain('<span data-md-field-affix>CHF</span>')
         ->toContain('<span data-md-field-affix>per month</span>')
         ->toContain('type="number"')
@@ -236,3 +237,12 @@ it('takes a custom control marked as the field\'s control, and a hint class', fu
         ->toMatch('/<p id="expiry-support" data-md-field-support\s+class="md-ink-primary"\s*>In the future<\/p>/')
         ->toContain('<fieldset aria-hidden="true" data-md-field-outline>');
 });
+
+it('gives the one-line field a stylesheet that brings the field and its icons', function () {
+    $css = (string) file_get_contents(__DIR__.'/../../../resources/css/components/input.css');
+
+    expect($css)->toStartWith('/*')
+        ->toContain("@import './field.css';")
+        ->toContain("@import './icon.css';")
+        ->and((string) file_get_contents(__DIR__.'/../../../resources/css/components.css'))->toContain("@import './components/input.css';");
+});