Give the account-menu avatar a state layer
The trigger had the focus ring but no hover and no pressed feedback at all, where every comparable trigger in the library carries `state-layer` and M3 asks for two visual indicators per state. An avatar image sits behind the layer, so the wash shows over a photograph too. Plan: docs/plans/material-3-alignment.md, step 21 (navigation N-15). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
co-authored by
Claude Opus 5
parent
5205aa8842
commit
1218371568
@@ -38,10 +38,12 @@
|
||||
type="button"
|
||||
aria-label="{{ $label }}"
|
||||
data-account-menu
|
||||
class="touch-target focus-ring inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-corner-full bg-primary-container type-label-lg text-on-primary-container"
|
||||
class="state-layer touch-target focus-ring inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-corner-full bg-primary-container type-label-lg text-on-primary-container"
|
||||
>
|
||||
@if ($image)
|
||||
<img src="{{ $avatar }}" alt="" class="size-full rounded-corner-full object-cover" />
|
||||
{{-- Behind the state layer (`state-layer` paints its ::before at z-index -1), so an
|
||||
avatar image still shows the hover and pressed states over it. --}}
|
||||
<img src="{{ $avatar }}" alt="" class="relative -z-20 size-full rounded-corner-full object-cover" />
|
||||
@elseif (filled($initials))
|
||||
{{ $initials }}
|
||||
@else
|
||||
|
||||
Reference in New Issue
Block a user