noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Keep a focused field's focus edge under the pointer

Browse Source 
The hover rule's `:not(:has([data-md-field-control]:disabled))` weighs
as much as its argument, so hover weighed (0,5,0) against focus's
(0,2,0), and the error's hover (0,6,0) against the error's focus
(0,4,0): a focused field with the pointer on it drew a 2px on-surface
edge instead of primary, a field in error on-error-container instead of
error, in both variants. A customizable select with its menu open lost
the same way, since focus is then on an option in the top layer and
only select.css's `:open` rule (0,3,1) draws the focus edge. M3 layers
focus over hover. The disabled condition is now weightless inside
`:where()`, still keeping hover off a disabled field, and the focus
rule gains the field ancestor: focus (0,3,0) outweighs hover (0,2,0),
the error's focus (0,4,0) the error's hover (0,3,0), and the open
select both. An open select in error drew primary, not error, and now
draws error. A browser test hovers and clicks an outlined, a filled and
an invalid field and opens a select and a select in error, comparing
each edge with its role; it fails without the change (the error select
without select.css's rule).

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Andreas Reinhold / reini
2026-09-17 05:29:29 +02:00
co-authored by Claude Opus 5
parent 0641071a06
commit 029c78d301
4 changed files with 106 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/components/field.css
+8 -4
View File
@@ -318,14 +318,18 @@
/* 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. */
here would beat it whatever the selector weighs. M3 layers focus over hover, so a focused
field keeps its focus edge under the pointer: the condition is weightless (`:where()`, where
`:not(:has(…))` would weigh as much as its argument), and each state drawn over hover
outweighs it — focus (0,3,0) over hover (0,2,0), the error's focus (0,4,0) over the error's
hover (0,3,0), and select.css's open select (0,3,1) over both. */
@media (hover: hover) {
[data-md-field]:not(:has([data-md-field-control]:disabled)) [data-md-field-box]:hover {
:where([data-md-field]:not(:has([data-md-field-control]:disabled))) [data-md-field-box]:hover {
--field-edge: var(--md-sys-color-on-surface);
}
}
[data-md-field-box]:focus-within {
[data-md-field] [data-md-field-box]:focus-within {
--field-edge: var(--md-sys-color-primary);
--field-ink: var(--md-sys-color-primary);
}
@@ -340,7 +344,7 @@
}
@media (hover: hover) {
[data-md-field][data-md-invalid]:not(:has([data-md-field-control]:disabled)) [data-md-field-box]:hover {
:where([data-md-field]:not(:has([data-md-field-control]:disabled)))[data-md-invalid] [data-md-field-box]:hover {
--field-edge: var(--md-sys-color-on-error-container);
}
}
resources/css/components/select.css
+9 -2
View File
@@ -39,8 +39,10 @@
/* Where the browser has a customizable select, the closed select is its own
button: without the border, padding and arrow that button brings, it is the
same field as before. While its list is open the field reads as focused —
said from `:open`, because focus inside the list is in the top layer — and
the arrow turns over, as the searchable choices' does. */
said from `:open`, because focus inside the list is in the top layer — in
the error colour when the field is in error, as a focused one is — and the
arrow turns over, as the searchable choices' does. Both outweigh field.css's
hover, so the pointer left on the field does not take the focus edge away. */
@supports (appearance: base-select) {
select[data-md-field-control] {
appearance: base-select;
@@ -68,6 +70,11 @@
}
}
[data-md-field][data-md-invalid] [data-md-field-box]:has(select[data-md-field-control]:open) {
--field-edge: var(--md-sys-color-error);
--field-ink: var(--md-sys-color-error);
}
[data-md-field]:has(select[data-md-field-control]:open) [data-md-field-arrow] {
rotate: 180deg;
}