Open a submenu from a menu item

Plan step 22, actions.md § Missing (Submenus): M3's Expressive vertical
menu specifies submenus and the Left/Right keys that open and close them,
and the library had neither.

`<x-menu-item submenu>` puts its slot in a second popover on the item's
end, flipping to the start where there is no room. `materialSubmenu`
reuses the menu button pattern one level in: the item is its own trigger,
so the anchor move and the button lookup are overridden away; Right,
Enter and Space open it, Left and Escape close it and return the focus,
and a fine pointer resting on the item opens it after a moment. `items()`
now stops at the popover it belongs to, so the arrows never walk between
a menu and an open submenu. The menu publishes its container as custom
properties so a vibrant menu's submenus are vibrant too.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/views/showcase/sections/menus.blade.php

@@ -36,6 +36,30 @@
                 <x-menu-item label="Upload a folder" icon="drive_folder_upload" />
             </x-menu>
             BLADE,
+        'Submenus' => <<<'BLADE'
+            <x-menu label="Share actions">
+                <x-slot:trigger>
+                    <x-button label="Share" icon="share" variant="tonal" />
+                </x-slot:trigger>
+
+                <x-menu-item label="Copy link" icon="content_copy" shortcut="⌘C" />
+                <x-menu-item label="Send to" icon="send" submenu>
+                    <x-menu-item label="A person" icon="person" />
+                    <x-menu-item label="A team" icon="group" />
+                    <x-menu-item label="Somewhere else" icon="more_horiz" submenu>
+                        <x-menu-item label="Slack" icon="chat" />
+                        <x-menu-item label="Email" icon="mail" />
+                    </x-menu-item>
+                </x-menu-item>
+                <x-menu-item label="Export as" icon="download" submenu>
+                    <x-menu-item label="ZIP" icon="folder_zip" />
+                    <x-menu-item label="PDF" icon="picture_as_pdf" />
+                    <x-menu-item label="CSV" icon="table" disabled />
+                </x-menu-item>
+                <x-menu-separator />
+                <x-menu-item label="Delete" icon="delete" />
+            </x-menu>
+            BLADE,
         'Icons in their own colour' => <<<'BLADE'
             <x-menu label="New plan">
                 <x-slot:trigger>
@@ -56,7 +80,8 @@
 
     <p class="max-w-3xl type-body-md text-on-surface-variant">
         <code>&lt;x-menu&gt;</code> with <code>&lt;x-menu-item&gt;</code>, <code>&lt;x-menu-group&gt;</code> and <code>&lt;x-menu-separator&gt;</code>.
-        Open one with the keyboard too: arrows, Home, End, a letter, Escape.
+        Open one with the keyboard too: arrows, Home, End, a letter, Escape. A <code>submenu</code> item opens a second list beside it
+        &mdash; Right to enter it, Left to come back.
     </p>
 
     @foreach ($examples as $title => $code)