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

This commit is contained in:

Andreas Reinhold / reini

2026-09-14 06:31:56 +02:00

co-authored by

Claude Opus 5

parent d74fa250ee

commit 25091ebf21

7 changed files with 462 additions and 205 deletions

									
										resources/views/components/menu.blade.php
									
		+2
		
												View File
												
				@@ -69,6 +69,8 @@

				        id="material-menu-{{ $key }}"

				        popover="auto"

				        role="menu"

				        data-menu

				        @if ($vibrant) data-vibrant @endif

				        @if ($label) aria-label="{{ $label }}" @endif

				        tabindex="-1"

				        style="position-anchor: {{ $anchor }}"