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

Draw the menu group without Tailwind

Browse Source 
<x-menu-group> renders data-md-menu-group with data-md-gap and no
class list; menu-group.css draws the plain cluster's 4px padding and
the gapped Expressive layout's 2px item gap and 8px cluster margin
from SegmentedMenuTokens (plan step 36, actions).

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 16:08:25 +02:00
co-authored by Claude Opus 5
parent 2acd9ab492
commit 2f8fb2183f
5 changed files with 76 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/components/menu-group.css
+49
View File
@@ -0,0 +1,49 @@
/*
* <x-menu-group>: a labelled or gapped cluster of items in an `<x-menu>`
* (menu-group.blade.php).
*
* Without `gap`, a plain 4px of vertical padding around the cluster, 0 at either end of the list
* (the popover's own padding already gives that room). `data-md-gap` draws M3 Expressive's
* "Grouped" layout instead: items 2px apart (`SegmentedMenuTokens.SegmentedGap`, androidx Compose
* Material 3, Apache-2.0), clusters themselves 8px apart — the same 8px `<x-menu-separator>`
* keeps above and below its line, so a menu is the same height whichever it uses
* (docs/reference/m3/components-actions-communication-containment.md § Menus → Specification).
*
* The label is label-large in on-surface-variant, `aria-hidden` beside the `role="group"`
* `aria-label` a screen reader reads instead (`SegmentedMenuTokens.GroupLabelTextFont`).
*/
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@layer material.components {
[data-md-menu-group]:not([data-md-gap]) {
padding-block: var(--md-sys-measurement-space50);
}
[data-md-menu-group]:not([data-md-gap]):first-child {
padding-block-start: 0;
}
[data-md-menu-group]:not([data-md-gap]):last-child {
padding-block-end: 0;
}
[data-md-menu-group][data-md-gap]:not(:first-child) {
margin-block-start: var(--md-sys-measurement-space100);
}
[data-md-menu-group-label] {
padding-inline: var(--md-sys-measurement-space200);
padding-block: var(--md-sys-measurement-space100) var(--md-sys-measurement-space50);
color: var(--md-sys-color-on-surface-variant);
font: var(--md-sys-typescale-label-lg);
letter-spacing: var(--md-sys-typescale-label-lg-tracking);
font-variation-settings: normal;
}
[data-md-menu-group-items] {
display: flex;
flex-direction: column;
gap: var(--md-sys-measurement-space25);
}
}