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

Draw the menu item's state layer and focus ring from the classes

Browse Source 
Plan step 36 ("Interaction is the shared classes", the user, 2026-09-14).
menu-item.css hand-rolled md-state-layer and md-focus-ring, including a
separate aria-disabled rule the class already carries; the row now renders
the classes and keeps only the inward -3px ring offset a row edge to edge
in the list needs. No md-touch-target: the row is already 48px tall.

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 18:07:12 +02:00
co-authored by Claude Opus 5
parent 7803298fe7
commit 6c30f1e3ae
3 changed files with 11 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/components/menu-item.css
+6 -36
View File
@@ -16,7 +16,11 @@
* (`ItemTrailingSupportingTextFont`) sits at the end. Every quiet part of the row — the icon, the
* description, the trailing text — inks together as `--md-menu-item-ink`; corner and colour are
* two springs, not one (§ ACT-19), and `icon-class` paints only the leading icon, over that ink
* but never over disabled.
* but never over disabled. The row renders the foundation's `md-state-layer` and `md-focus-ring`
* (foundation/interaction.css) — no `md-touch-target`, since the row is already 48px tall — and
* keeps only one refinement: the ring reads inward (-3px), because a row sits edge to edge in the
* list and an outward one would run past it. A disabled item stays focusable and keeps its ring,
* because M3 keeps it reachable, but the class already withholds the layer from `aria-disabled`.
*
* `submenu` turns the row into the WAI-ARIA menu button for a second `role="menu"` popover beside
* it, anchored to its end and flipping to the start where the window has no room
@@ -37,8 +41,6 @@
[data-md-menu-item] {
--md-menu-item-ink: var(--md-sys-color-on-surface-variant);
position: relative;
isolation: isolate;
display: flex;
inline-size: 100%;
min-block-size: var(--md-sys-measurement-space600);
@@ -50,7 +52,6 @@
color: var(--md-sys-color-on-surface);
text-align: start;
cursor: pointer;
outline: none;
-webkit-user-select: none;
user-select: none;
transition-property: border-radius, background-color, color;
@@ -61,41 +62,10 @@
var(--md-sys-motion-spatial-fast),
var(--md-sys-motion-effects-fast), var(--md-sys-motion-effects-fast);
&::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background-color: currentColor;
opacity: 0;
pointer-events: none;
transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
}
@media (hover: hover) {
&:hover::before {
opacity: var(--md-sys-state-hover-state-layer-opacity);
}
}
/* The row sits edge to edge in the list, so the ring reads inward, not past the item. */
&:focus-visible {
outline: 3px solid var(--md-sys-color-secondary);
outline-offset: -3px;
}
&:focus-visible::before {
opacity: var(--md-sys-state-focus-state-layer-opacity);
}
&: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 {