diff --git a/resources/css/components/field.css b/resources/css/components/field.css
index 99d1212f..de832056 100644
--- a/resources/css/components/field.css
+++ b/resources/css/components/field.css
@@ -165,7 +165,11 @@
         pointer-events: none;
     }
 
-    /* A trailing button — clear, copy, reveal — is an icon button: the icon in a 40px state layer. */
+    /* A trailing button — clear, copy, reveal — is an icon button: the icon in a state layer that
+       scales with the field's own icon size (40px at `md`, smaller at `sm`/`xs`), which the
+       foundation's fixed-size classes cannot draw; the layer doubles as the touch target, since it
+       already reaches 40px+ without a second pseudo. The hook stays `data-md-field-button` rather
+       than a class because datepicker and timepicker, not yet rewritten, still select it. */
     [data-md-field-button] {
         position: relative;
         display: grid;
@@ -203,6 +207,11 @@
         background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%), transparent);
     }
 
+    [data-md-field-button]:disabled::before,
+    [data-md-field-button][aria-disabled='true']::before {
+        display: none;
+    }
+
     [data-md-field-affix] {
         flex: none;
         color: var(--md-sys-color-on-surface-variant);
diff --git a/tests/Feature/Components/FieldTest.php b/tests/Feature/Components/FieldTest.php
index 757f5d4f..50099230 100644
--- a/tests/Feature/Components/FieldTest.php
+++ b/tests/Feature/Components/FieldTest.php
@@ -1,5 +1,14 @@
 <?php
 
+use NoNameWeb\LivewireMaterial\Tests\Support\ComponentStylesheet;
+
+it('hides the trailing button\'s state layer once it is disabled', function () {
+    // The field's trailing button (clear, copy, reveal) scales its state layer with the field's
+    // own icon size, which the foundation's fixed classes cannot draw, so it keeps its own
+    // declarations, keyed on the shared data-md-field-button hook. Disabled must still hide it.
+    expect(ComponentStylesheet::read('field')->declarations("[data-md-field-button]:disabled::before, [data-md-field-button][aria-disabled='true']::before"))->toBe(['display' => 'none']);
+});
+
 it('draws an outlined field with a notched label unless told otherwise', function () {
     $html = (string) $this->blade('<x-input label="Share name" />');