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

Keep the state layer off a disabled menu item

Browse Source 
Plan step 36. The old `state-layer` utility hid its layer on
`[aria-disabled='true']`; the menu item's hand-written layer dropped
that, so a disabled item, which stays focusable, drew the 10% focus
layer. Its 38% ink now reads --md-sys-state-disabled-content-opacity,
as button.css does, instead of a literal.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 17:07:10 +02:00
co-authored by Claude Opus 5
parent 4893eaf398
commit f53c559c40
2 changed files with 10 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/components/menu-item.css
+7 -2
View File
@@ -91,6 +91,11 @@
&:active::before {
opacity: var(--md-sys-state-pressed-state-layer-opacity);
}
/* A disabled item stays focusable and keeps its focus ring, but has no state layer. */
&[aria-disabled='true']::before {
display: none;
}
}
[data-md-menu-item]:first-child {
@@ -124,7 +129,7 @@
}
[data-md-menu-item][aria-disabled='true'] {
--md-menu-item-ink: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
--md-menu-item-ink: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
pointer-events: none;
color: var(--md-menu-item-ink);
@@ -135,7 +140,7 @@
}
[data-md-menu-item][aria-disabled='true'] [data-md-icon] {
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent) !important;
color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent) !important;
}
[data-md-menu-item-text] {