Draw the menu group without Tailwind

<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

resources/css/components.css

@@ -21,6 +21,7 @@
 @import './components/split-button.css';
 @import './components/fab.css';
 @import './components/menu-separator.css';
+@import './components/menu-group.css';
 
 /* Inputs, selection and data */
 @import './components/form.css';

resources/css/components/menu-group.css

@@ -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);
+    }
+}

resources/views/components/menu-group.blade.php

@@ -16,7 +16,9 @@
      list round and each cluster reads as one block. Clusters stand 8px apart, the same 8px a
      separator keeps above and below its line, so a menu is the same height whichever it uses.
      SegmentedMenuTokens' own GroupShape is 8dp where the library's list ends are 12dp; the
-     library's shape wins, so a cluster's ends and a list's ends match. --}}
+     library's shape wins, so a cluster's ends and a list's ends match.
+
+     Drawn by resources/css/components/menu-group.css from `data-md-gap`. --}}
 
 @props([
     'label' => null,
@@ -24,24 +26,21 @@
 ])
 
 @php
-    $attributes = $attributes
-        ->class([
-            'py-1 first:pt-0 last:pb-0' => ! $gap,
-            'not-first:mt-2' => $gap,
-        ])
-        ->merge(array_filter([
-            'role' => 'group',
-            'aria-label' => $label,
-        ], fn ($value): bool => filled($value)));
+    $attributes = $attributes->merge(array_filter([
+        'data-md-menu-group' => true,
+        'data-md-gap' => $gap ? true : null,
+        'role' => 'group',
+        'aria-label' => filled($label) ? $label : null,
+    ], fn ($value): bool => $value !== null));
 @endphp
 
 <div {{ $attributes }}>
     @if (filled($label))
-        <div aria-hidden="true" class="px-4 pt-2 pb-1 type-label-lg text-on-surface-variant">{{ $label }}</div>
+        <div data-md-menu-group-label aria-hidden="true">{{ $label }}</div>
     @endif
 
     @if ($gap)
-        <div class="space-y-0.5">{{ $slot }}</div>
+        <div data-md-menu-group-items>{{ $slot }}</div>
     @else
         {{ $slot }}
     @endif