Andreas Reinhold / reiniandClaude Opus 5
2f8fb2183f
<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
50 lines
2.0 KiB
CSS
50 lines
2.0 KiB
CSS
/*
|
|
* <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);
|
|
}
|
|
}
|