From d5a3df535c72b9a7e9629a32cba66401674e27bd Mon Sep 17 00:00:00 2001
From: Andreas Reinhold / reini <reini@kadenpartner.ch>
Date: Mon, 14 Sep 2026 18:13:55 +0200
Subject: [PATCH] Keep the state layer off a disabled field trailing button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Plan step 36 audit. field.css's trailing button (clear, copy, reveal)
scales its state layer with the field's own icon size and doubles it as
the touch target, which the foundation's fixed-size interaction classes
cannot draw, and the hook stays data-md-field-button rather than a class
because datepicker and timepicker, not yet rewritten, still select it —
so it keeps its own declarations. It never hid the layer on a disabled
button, unlike every rewritten component's copy; it now does.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
---
 resources/css/components/field.css     | 11 ++++++++++-
 tests/Feature/Components/FieldTest.php |  9 +++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

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" />');