From 35548dc13b930c9ab0a3b4d109901586a7ce50fb Mon Sep 17 00:00:00 2001 From: Andreas Reinhold / reini Date: Mon, 14 Sep 2026 05:50:38 +0200 Subject: [PATCH] Leave a disabled field's outline dark on hover MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The hover declaration sat on .field-box while the disabled edge is inherited from .field, and a direct declaration beats an inherited one whatever the selectors weigh — so a disabled outlined field lit a full-opacity on-surface outline. It is now scoped past a disabled control and, like every other state layer here, kept inside @media (hover: hover) so a tap does not leave it stuck. M3 gives a disabled control no state. Plan step 13, finding IN-02. Co-Authored-By: Claude Fable 5.1 Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9 --- resources/css/components/field.css | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/resources/css/components/field.css b/resources/css/components/field.css index bee770b6..51be79ad 100644 --- a/resources/css/components/field.css +++ b/resources/css/components/field.css @@ -387,8 +387,13 @@ display: none; } - .field-box:hover { - --field-edge: var(--md-sys-color-on-surface); + /* Hover only where a pointer can hover, and never on a disabled field: M3 gives a disabled + control no state layer at all, and the disabled edge below is inherited, so a declaration + here would beat it whatever the selector weighs. */ + @media (hover: hover) { + .field:not(:has(.field-control:disabled)) .field-box:hover { + --field-edge: var(--md-sys-color-on-surface); + } } .field-box:focus-within { @@ -405,8 +410,10 @@ --field-ink: var(--md-sys-color-error); } - .field[data-invalid] .field-box:hover { - --field-edge: var(--md-sys-color-on-error-container); + @media (hover: hover) { + .field[data-invalid]:not(:has(.field-control:disabled)) .field-box:hover { + --field-edge: var(--md-sys-color-on-error-container); + } } .field[data-invalid] .field-box:focus-within {