Leave a disabled field's outline dark on hover

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 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 05:50:38 +02:00
co-authored by Claude Fable 5.1
parent 31663c48ba
commit 35548dc13b
+9 -2
View File
@@ -387,9 +387,14 @@
display: none; display: none;
} }
.field-box:hover { /* 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-edge: var(--md-sys-color-on-surface);
} }
}
.field-box:focus-within { .field-box:focus-within {
--field-edge: var(--md-sys-color-primary); --field-edge: var(--md-sys-color-primary);
@@ -405,9 +410,11 @@
--field-ink: var(--md-sys-color-error); --field-ink: var(--md-sys-color-error);
} }
.field[data-invalid] .field-box:hover { @media (hover: hover) {
.field[data-invalid]:not(:has(.field-control:disabled)) .field-box:hover {
--field-edge: var(--md-sys-color-on-error-container); --field-edge: var(--md-sys-color-on-error-container);
} }
}
.field[data-invalid] .field-box:focus-within { .field[data-invalid] .field-box:focus-within {
--field-edge: var(--md-sys-color-error); --field-edge: var(--md-sys-color-error);