noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
bae1df09dab06e8de8bede827554de46fe2575e5
livewire-material/resources/css/components/menu-item.css
T
Andreas Reinhold / reiniandClaude Opus 5 6c30f1e3ae Draw the menu item's state layer and focus ring from the classes 
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
2026-09-14 18:07:12 +02:00

189 lines
8.1 KiB
CSS
Raw Blame History

/*
* <x-menu-item>: one row in an `<x-menu>` — an action, a link, or a choice — and, with `submenu`,
* the trigger and popover of a nested menu beside it.
*
* SegmentedMenuTokens (androidx Compose Material 3, Apache-2.0): 48px row (M3's published "List
* item height" wins over the token's own 44dp `Item`, docs/audits/m3-alignment/actions.md §
* ACT-28), 16px either side (`ItemLeadingSpace`/`ItemTrailingSpace`, § ACT-11), 12px between the
* icon, the label and the trailing content (`ItemBetweenSpace`, off the 8dp grid), 4px corners
* (`ItemShape`) that open to 12px at either end of the list (`ItemFirstChildShape`/
* `ItemLastChildShape` — the library's own list ends, 12px, win over `GroupShape`'s 8dp so a
* cluster's ends and a list's ends match, menu-group.css). A selected row
* (`role="menuitemcheckbox"`, the tick beside the colour and shape § ACT-27) takes
* `ItemSelectedShape`'s 12px corner in tertiary-container; `current` — a menu of places rather
* than choices — takes the same 12px corner in secondary-container, the navigation-indicator
* role. `description` (`ItemSupportingTextFont`) grows the row by 8px top and bottom; `shortcut`
* (`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. 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
* (resources/js/menu.js). The popover shares its container colour with the menu it opens from
* through `--material-menu-surface`/`--material-menu-ink` (menu.css defines them on
* `[data-md-menu-popover]`; the fallbacks here are the standard menu's, for a submenu inside some
* other list, e.g. a FAB menu's). Inside an `<x-menu sheet-at-compact>` sheet the same markup
* opens in place instead — menu.css restyles `[data-md-submenu]` and `[data-md-submenu-chevron]`
* there.
*/
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@import './icon.css';
@import './badge.css';
@layer material.components {
[data-md-menu-item] {
--md-menu-item-ink: var(--md-sys-color-on-surface-variant);
display: flex;
inline-size: 100%;
min-block-size: var(--md-sys-measurement-space600);
align-items: center;
gap: 12px;
padding-inline: var(--md-sys-measurement-space200);
border-radius: var(--md-sys-shape-corner-xs);
background-color: transparent;
color: var(--md-sys-color-on-surface);
text-align: start;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
transition-property: border-radius, background-color, color;
transition-duration:
var(--md-sys-motion-spatial-fast-duration),
var(--md-sys-motion-effects-fast-duration), var(--md-sys-motion-effects-fast-duration);
transition-timing-function:
var(--md-sys-motion-spatial-fast),
var(--md-sys-motion-effects-fast), var(--md-sys-motion-effects-fast);
/* The row sits edge to edge in the list, so the ring reads inward, not past the item. */
&:focus-visible {
outline-offset: -3px;
}
}
[data-md-menu-item]:first-child {
border-start-start-radius: var(--md-sys-shape-corner-md);
border-start-end-radius: var(--md-sys-shape-corner-md);
}
[data-md-menu-item]:last-child {
border-end-start-radius: var(--md-sys-shape-corner-md);
border-end-end-radius: var(--md-sys-shape-corner-md);
}
[data-md-menu-item][data-md-description] {
padding-block: var(--md-sys-measurement-space100);
}
[data-md-menu-item][aria-checked='true'] {
--md-menu-item-ink: var(--md-sys-color-on-tertiary-container);
border-radius: var(--md-sys-shape-corner-md);
background-color: var(--md-sys-color-tertiary-container);
color: var(--md-sys-color-on-tertiary-container);
}
[data-md-menu-item][aria-current='page']:not([aria-checked='true']) {
--md-menu-item-ink: var(--md-sys-color-on-secondary-container);
border-radius: var(--md-sys-shape-corner-md);
background-color: var(--md-sys-color-secondary-container);
color: var(--md-sys-color-on-secondary-container);
}
[data-md-menu-item][aria-disabled='true'] {
--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);
}
[data-md-menu-item] [data-md-icon] {
color: var(--md-menu-item-ink);
}
[data-md-menu-item][aria-disabled='true'] [data-md-icon] {
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] {
min-inline-size: 0;
flex: 1;
}
[data-md-menu-item-label] {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font: var(--md-sys-typescale-body-lg);
letter-spacing: var(--md-sys-typescale-body-lg-tracking);
font-variation-settings: normal;
}
[data-md-menu-item-description] {
display: block;
color: var(--md-menu-item-ink);
font: var(--md-sys-typescale-body-md);
letter-spacing: var(--md-sys-typescale-body-md-tracking);
font-variation-settings: normal;
}
[data-md-menu-item-shortcut] {
flex-shrink: 0;
color: var(--md-menu-item-ink);
font: var(--md-sys-typescale-label-sm);
letter-spacing: var(--md-sys-typescale-label-sm-tracking);
font-variation-settings: normal;
}
/* The submenu popover: a menu of its own, sharing the container colour of the list it opens
from. The fallbacks are the standard menu's, for a submenu inside some other list. */
[data-md-submenu] {
inset: auto;
margin: 0;
margin-inline: var(--md-sys-measurement-space50);
min-inline-size: 112px;
max-inline-size: 280px;
max-block-size: min(288px, calc(100dvh - 32px));
overflow-y: auto;
border-width: 0;
border-radius: var(--md-sys-shape-corner-lg);
padding: var(--md-sys-measurement-space50);
background-color: var(--material-menu-surface, var(--md-sys-color-surface-container-low));
color: var(--material-menu-ink, var(--md-sys-color-on-surface));
box-shadow: var(--md-sys-elevation-2);
transform-origin: top;
position-area: inline-end span-block-end;
position-try-fallbacks: flip-inline;
opacity: 0;
scale: 0.95;
transition-property: opacity, scale, display, overlay;
transition-duration:
var(--md-sys-motion-effects-fast-duration), var(--md-sys-motion-spatial-fast-duration),
var(--md-sys-motion-spatial-fast-duration), var(--md-sys-motion-spatial-fast-duration);
transition-timing-function:
var(--md-sys-motion-effects-fast), var(--md-sys-motion-spatial-fast), linear, linear;
transition-behavior: allow-discrete;
&:popover-open {
opacity: 1;
scale: 1;
}
@starting-style {
&:popover-open {
opacity: 0;
scale: 0.95;
}
}
}
}
Reference in New Issue View Git Blame Copy Permalink