Draw the menu separator without Tailwind

The separator renders data-md-menu-separator and takes its 1px line,
8px block margin and 16px inset from menu-separator.css in
material.components (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

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

resources/css/components/menu-separator.css

@@ -0,0 +1,18 @@
+/*
+ * <x-menu-separator>: a line between groups of items in a menu — 1px in `outline-variant`, with
+ * M3's 8px above and below it, inset to the 16px the items keep either side (M3's menu page:
+ * "dividers are more subtle and are the right choice for scrollable menus"; SegmentedMenuTokens'
+ * divider spacing).
+ */
+
+@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
+
+@layer material.components {
+    [data-md-menu-separator] {
+        block-size: 1px;
+        margin-block: var(--md-sys-measurement-space100);
+        margin-inline: var(--md-sys-measurement-space200);
+        border-width: 0;
+        background-color: var(--md-sys-color-outline-variant);
+    }
+}

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

@@ -1,4 +1,4 @@
 {{-- A line between groups of items in an `<x-menu>`: 1px, with M3's 8px above and below it, inset
-     to the 16px the items keep either side. --}}
+     to the 16px the items keep either side. Drawn by resources/css/components/menu-separator.css. --}}
 
-<hr role="separator" {{ $attributes->class('mx-4 my-2 h-px border-0 bg-outline-variant') }} />
+<hr role="separator" data-md-menu-separator {{ $attributes }} />